手の込んだことをしていない限りHTMLのHEADタグの中で1つのスクリプトを読ませるだけで使えます。
最初に、スクリプト「smartframe.js」をダウンロードしておきます。
フレームを設定しているHTMLファイルのHEADタグの中に、以下のようなsmartframe.jsを読み込むタグを足してください。
<script src="./smartframe.js" charset="utf-8"></script>
スマートフォンでこのHTMLページを表示すると、フレームがスマートフォンに適した形に書き換えらえます。ただし、サーバーにアップロードするまで完全には動きません。
フレームの無いページでsmartframe.jsを読み込んだ場合は、そのページ内の画像などをスマートフォン対応するように書き換えます(おまけ機能)。
サンプルのHTMLも配布しています。サンプルはsmartframe.zipからダウンロードできます。 (2023/05/13更新 PCでブラウザ画面縮小が正しくできない問題を修正しました)
オプションを指定すると細かい挙動を変更できます。 smartframe.jsを読み込むタグの直前に以下のようなパラメータ設定のスクリプトを書いてください。
<script>
<!--
// 設定。デフォルト値から変えなければ省略してもよい
smartStyleAdjust_frameMenuLimit = 1/3; // 画面幅(高さ)に占めるフレーム幅(高さ)がこの割合以上ならメニューボタン化する。0にすると常時メニュー化
smartStyleAdjust_enableMenuArea = true; // メニューボタン用のスペースを確保する場合true。falseの場合コンテンツと被る可能性あり
smartStyleAdjust_frameAutoHeight = false; // フレームの高さを中身に合わせて自動調整する。あまり当てにならない
smartStyleAdjust_frameBorderSize = 3; // フレーム枠幅(pixel) 指定が無い場合のデフォルト
smartStyleAdjust_frameButtonSize = 32; // フレームオープンボタンサイズ(pixel)
smartStyleAdjust_frameButtonMargin1 = 3; // フレームオープンボタンマージン1(pixel) フレーム枠からの距離
smartStyleAdjust_frameButtonMargin2 = 3; // フレームオープンボタンマージン2(pixel) 画面端からの距離
smartStyleAdjust_framePercentBase = 1024; // フレームサイズが%指定された時の基準画面サイズ(pixel)
smartStyleAdjust_frameAdjustImage = true; // 画像サイズを調整
smartStyleAdjust_frameAdjustTable = true; // テーブルサイズを調整
smartStyleAdjust_onlySmartPhone = true; // スマートフォンの時だけ使用する
smartStyleAdjust_disableCache = true; // リンクのキャッシュを無効にする
// -->
</script>
<script src="./smartframe.js" charset="utf-8"></script>
商用・非商用に限らず、誰でも無償で自由に使ってOKです。 その代わり、バグったりしても作者は修正の義務を負いません(できる限りは頑張りますが)。 気に入らない部分があれば改変も自由です。 ただし、改変版には改変版と明記しておいて下さい。