iPadのCSSウェブサイトに関する問題

Question

iPad2 Safariブラウザで非常に奇妙なことが起こっています。

次のページ（ホームページ）は、右上のナビゲーションリンクを切断しています。それは "見積もりを要求する"と言うべきであるが、 "要求"で切り捨てる。

さらに、通常のようにiPadの画面に合わせてページのサイズが自動的に変更されることはありません。

サイトURL：www.skiplan.co.uk

私は、ビューポートメタタグを使用して試してみましたが、それはちょうどそれが悪化させます。

アイデア？私は火かき棒で何の問題も見ることができません。

注：安っぽいオンラインのiPadエミュレータは細かいことを示して - それは960ピクセル幅であるかのように、それは物理的/本物のiPad2に

Answer 1

iPadのビューポートの行為が起こっているので、あなたのサイトが画面よりも大きいです。ビューポートのメタタグは、適切に拡大するためには周りを遊ばなければならないかもしれませんが、正しく拡大縮小するには必要です。

もう1つの選択肢は、メディアクエリを使用して、より小さい画面用のより小さいバージョンを設計することです。

私のアドバイスは、常に960pxのバージョンを使用することです - 1020pxは理由で一般的な幅ではありません！

Answer 2

パーセントのようなCSSスタイルを使用している可能性が最も高いです。このスタイルは、ディスプレイサイズのコンテナ（最大寸法）に合わせてiPadで後でデザインを破るものです。

最も一般的には、人々がボックス/コンテナをpxに定義し、フォント/ etcを%' or em`に定義すると、これが表示されます。