1

cssgrid.net の 1140 グリッドを使用しようとしていますが、問題が発生しています。768px ～ 795px の画面では、.container div の右側のパディングが機能しません。代わりに、コンテンツがブラウザー ウィンドウの右端に突き当たり始めます。Mac 上の Chrome の最新バージョンで自分のサイトを表示しています (この範囲の主な問題は、縦向きの iPad が 768 ピクセルであることです)。

右上の「ダウンロード」ボタンを使用してcssgrid.netでも同じことが起こっているようです。

このサイズの画面のパディングを 1140.css 内の 20 ではなく 5 ピクセルに変更する、作業中のサイトで一時的な回避策を思いつきました。

@media only screen and (min-width : 768px) and (max-width : 795px){ 
.container{ padding-left: 5px; padding-right: 5px; } 
}

しかし、これは不必要な回避策のように思えます (快適さのためには 5 が少し近いので、20px のパディングが望ましいです)。

これについて何か洞察があれば、とても感謝しています。

4

2 に答える 2

0

これは見苦しい修正ですが、php を使用してユーザーが iPad を使用しているかどうかを確認し、viewport幅を 1024px に変更することができる場合があります。現在のビューポート メタ タグを次のように置き換えます。

<?
    $is_ipad = false;
    // check if user agent is an iPad
    if ( strpos($_SERVER['HTTP_USER_AGENT'],'iPad') ){
        $is_ipad = true;
    }

    // if it's an ipad, set viewport to 1024px wide
    if ($is_ipad){
        echo '<meta name = "viewport" content="width=1024">';
    }

    // if not an ipad, use device width
    else {
        echo '<meta name="viewport" content="width=device-width">';
    }

?>
于 2012-12-05T21:59:38.403 に答える
0

問題は最小幅にあります。これをグリッド スタイルに追加する

@media only screen and (max-width: 1023px) {
    .row {
        min-width: 720px;
    }
}
于 2013-02-01T05:01:51.553 に答える