iphoneに表示するウェブサイトを正確にスケーリングする

Question

私は320pxの幅に合わせてモバイルウェブサイトを構築しました。このスレッド（http://stackoverflow.com/questions/4520064/mobile-website-for-iphone-problems）では、iPhoneが正しい解像度（320ワイド）で表示するのに便利なコードをスローします。ただし、電話機を回転させると、自動的に拡大表示されたビューポートに合わせて再スケーリングされません。

これを修正する方法についてのご意見はありますか？

Answer 1

CSS media queries [w3.org]を使用してコンテンツのサイズを動的に調整できます。携帯電話は、肖像画や風景であるとき、たとえば、orientationを使用し、検出するため

：

@media all and (orientation:landscape) { 
    /* apply your css styles here */ 
} 

また、あなたがなりたい方法を具体的に応じて、一緒に特定のシナリオをチェーンすることができます。あなたが400ピクセルのデバイス幅の肖像ブラウザのスタイルをしたい場合たとえば、あなたは、次の操作を行います：

@media all and (orientation:landscape) and (device-width:400px) { 
    /* apply your css styles here */ 
} 

* あなたのCSSファイルの最後にメディアクエリがあるべきことに留意すべきであるが、そうしないと、既存のスタイルが正しく上書きされません。

Answer 2

私のモバイルプロジェクトの中には、resizeイベントにイベントリスナーを使用しています。デバイスがポートレート/ランドスケープ（またはデスクトップウィンドウのサイズが変更された）からシフトすると、イベントが呼び出され、エレメントの高さと幅を手動で設定できます。ここで

は、私が使用しているものの短い例です：

window.addEventListener('resize', resizetick, false); 
<...> 
function resizetick(e) { 
    if(this.resizet) 
     clearTimeout(this.resizet); 
     resizet = setTimeout(resizecallback, 100); 
} 
<...> 
function resizecallback() { 
    <if new resolution then resize elements here> 
} 

のsetTimeout /てclearTimeout背後にある目的は、複数のサイズ変更を防ぐためです。デスクトップブラウザのイベントは、サイズ変更中に継続的に発生し、モバイルユーザーは誤ってデバイスの方向を変えることがあります。私は繰り返しコンテンツのサイズを変更しないようにしたい。

resize（）とresizecallback（）をバインドするか、別の方法で処理する必要があります。私は、実用的なコードを切り取って貼り付けるプロジェクトを手元に持っていません - 残念です。 ：\

Answer 3

ウェブサイトの幅を320pxと明示的に指定すると、電話の幅はそれほど大きくありません。ラッパーはwidth: 100%である必要があります。これにより、文書が自分自身で再スケールされるか、ビューポートのスケールが変更されます。