-1

最近、地元の音楽学校のウェブサイトを作成しました。すべてにおいて改善し、多くの練習をしなければならないと教えてくれた良い経験です。
リンクはこちら

最初はレスポンシブにしようと思ったのですが、時間も知識も足りないことにすぐに気付きました。とにかく、初めて Html 5 と相対的な手段を使用しました。デスクトップ ナビゲーションは問題ないようです。

何か問題があります。iPad とモバイルのテストを行うと、ページの右側に空白ができます。ヘッダー、コンテンツ、フッターはスペース全体に収まりませんが、両方に width: 100% を設定しました。同じことが、Kindle Fire と Opera Mobile を使用したランドスケープ テストでも見られます。

どうすれば修正できますか？コンテナーをすべてのデバイス レイアウトに適合させるためだけに、完全にレスポンシブにしたくはありません。

4

1 に答える 1

0

ipad とモバイルで 100% を作成するには、次の 2 つのことが必要です。

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0">

• 100% 表示の問題が発生した後は、満足しています。たとえば、コンテンツの幅は 100% ですが、ナビゲーション、スライダー、脇は XXEM の幅です。

ipad/mobile などで幅 100% で表示するには、新しい css を追加する必要があります。例 ：

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
nav[role="navigation"] {width: 100%;}
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
nav[role="navigation"] {width: 100%;}
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
nav[role="navigation"] {width: 100%;}
}
于 2013-04-12T09:59:56.403 に答える