0

始める前に、私は経験豊富なWeb開発者ではないと言うことから始めます。

私はこのウェブサイトを書いています：http：//leydencarcentre.co.uk

デスクトップブラウザでは妥当に見えますが、iPad（2）で正しく表示するのに苦労しています。

縦向きのiPadでは、「ホームページ」ページを開くと少しズームインされますが、ズームアウトして画面全体のページ幅を取得することはできません。「MOT」ページは完全にズームアウトされているため、全幅が収まります。

iPadの横向きでは、どちらも正しく見えます。

私のサイトは基本的に960pxの固定幅ですが、メディアクエリを使用して少しレスポンシブにしようとしたことに注意してください。（これは流動的なレイアウトではありませんが、デスクトップ、タブレット、電話など、サイズごとにわずかに異なるdiv幅があります）。レイアウトの種類ごとにメインの背景の色を変えて、メディアの種類ごとにCSSがいつ起動するかを確認できるようにしました（デスクトップは白、タブレットはアンティークホワイト、モバイルはオレンジ）。

誰かがこれを手伝うことができますか？「iPadのウェブサイトの幅」のようなものをグーグルで検索しましたが、何が最善の方法かわかりません。

この特定のiPadの問題に関するヘルプや、CSSとレイアウトに関するアドバイスは大歓迎です。

完全にレスポンシブな流動的なレイアウトが町の話題であることは知っていますが、このサイトをかなり早く完成させたいと思っています。完全に流動的なレイアウトが本当に必要ですか？

ありがとう、

ポール

4

2 に答える 2

4

簡単な修正：

<meta name="viewport" content="width=1000">

これにより、iPadのビューポートがページにぴったり合うように拡大縮小されます（Chromeによると本体の幅は1000ピクセルです）。

モバイルウェブのグッドプラクティスに関しては、ユーザーがページのさまざまな部分をズームイン/ズームアウトできるように、いくつかのスケーリングオプションも追加します。

<meta name="viewport" content="width=1000, minimum-scale=.5, initial-scale=1, maximum-scale=2.5">
于 2012-10-16T21:13:45.720 に答える
0

多くのビューポート設定を試したので、最後にcale_bを使用しましたが、iPadではOKと表示されましたが、AndroidではChromeでは表示されませんでした。

そこで、本体のdivに最小の高さを追加しました。

ありがとうcale_b

于 2012-10-17T14:09:44.883 に答える