1

私はメディアクエリで遊んでいて、モバイル画面用の開発を始めました。最初のページは比較的希望どおりですが、画面のサイズを480px未満に変更すると、下部に水平スクロールバーが表示されます。私はまだモバイルデバイスでこれをテストしていませんが、同じエラーが表示されると思います。

サイトは次のとおりです。http：//brad.sebdengroup.com/newOdynSite/index.php

エラーを再現するには、サイトを開き、ウィンドウのサイズを480px未満に変更し、垂直方向に一番下までスクロールします

4

2 に答える 2

1

問題は次のとおりです。

#main span.bold {
    padding: 15px 20px;
    ...
}
#main span{
    width: 100%;
    ...
}

この CSS ルールの組み合わせにより、ページの幅よりも大きな要素が作成されます。幅 100% には、パディング、ボーダー、またはマージンによって使用されるスペースは含まれません。たとえば、ページ幅が 480px の場合、要素の幅は 20px + 480px + 20px = 520px になります。

これを回避するには、コンテンツを追加のタグでラップして、幅とパディングを個別の要素に適用できるようにし、必要に応じて CSS を微調整してください。例えば：

<span><strong>What have we done?</strong></span>
于 2012-08-08T12:40:49.000 に答える
0

overflow-x: hidden; を使用してみることができます。<body> でスクロールバーを非表示にします。ただし、ビュー ポートの外側のコンテンツを簡単に見ることはできません。

モバイル デバイスの場合、メディア クエリを使用してスタイル シートを指定できます。

<link rel="stylesheet" href="styles/mobile.css" media="only screen and (max-device-width: 480px)">

または、 <meta> 要素を使用できます。

<meta name="viewport" content="width=device-width, user-scalable=no">

于 2012-08-08T12:05:26.463 に答える