私が達成しようとしているのはこれです：
ナビゲーション コンテナを除いて、ページ全体を縮小します。スマートフォンでよりアクセスしやすくするために、CSS ルールの一部をオーバーライドしていますが、問題はかなりの数の画像を使用し、それらを元のサイズ (1 画像 px = 1 デバイス画面 px) で表示する必要があることです。
これを達成するためのテクニックはありますか？
質問する
52 次
1 に答える
1
コンテキストがないので難しいですが、次のように JavaScript と CSS で実現できるかもしれません。
1) デバイスの幅を検出し、ドキュメントの幅と比較します
ドキュメントの幅を取得するには、どこかで見つけた次のスニペットを使用できます。
var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0];
var width = w.innerWidth||e.clientWidth||g.clientWidth;
次に、次のように割って比率を取得しscreen.widthます。
var ratio = width / screen.width;
したがって、デバイスの幅が 320px (iPhone のポートレイト) で、ページが 980px (通常の iPhone のレンダリング) であるとします。
980 / 320 = 3.0625。
2）コンテンツをその比率にズーム/スケーリングします
CSS変換でそれを行うことができます
-ms-transform: scale(3.0625);
-webkit-transform: scale(3.0625);
-o-transform: scale(3.0625);
-moz-transform: scale(3.0625);
transform: scale(3.0625);
または最新のブラウザーと IE のCSS ズーム:
zoom:3.0625;
またはjQuery UI Effects、またはjQuery Transit、またはHTML5 キャンバス スケール(ターゲットがキャンバスの場合)、または純粋な JavaScript を使用します。
document.getElementById("idOfTheContent").style.width = document.getElementById("idOfTheContent").style.width * 3.0625;
document.getElementById("idOfTheContent").style.height = document.getElementById("idOfTheContent").style.height * 3.0625;
または....周りにあるスケーリング/ズーム方法を使用します。
いずれにせよ、スケールの精度（コンマの後の桁数は実際に処理されますが、整数に丸めても問題ないと思います）とそれがどのようにレンダリングされるかについてはわかりません。
それがうまくいくかどうか教えてください:-)
于 2012-09-27T23:43:32.480 に答える