3

体のすべての要素を100％まで伸ばすことができると仮定すると-次のようなことをすることに加えて：

body {
     overflow-x:hidden;
     width:320px;
}

@media all and (min-width: 360px) {
    body {
        width:360px;
    }
}

@media all and (min-width: 369px) {
    body {
        width:369px;
    }
}

@media all and (min-width: 480px) {
    body {
        width:480px;
    }
}

@media all and (min-width: 533px) {
    body {
        width:533px;
    }
}

@media all and (min-width: 569px) {
    body {
        width:569px;
    }
}

@media all and (min-width: 640px) {
    body {
        width:640px;
    }
}

上記よりも優れた/ハードコーディングされていないアプローチはありますか？

また、これをモバイルで使用することについてはさまざまな見解があります。

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

縦向きと横向きの間の初期スケール（バグ）がiOS 6 for iPadで修正されたため、上記は不要になったことをお読みください...

しかし、これは新旧のiPhoneだけでなく、AndroidやSamsungの他のモバイルデバイスでも必要であると思いますか？

4

1 に答える 1

1

問題が見つかりました。ウェブサイトの全幅にすべてのメディアクエリは必要ありません（ただし、これはほとんどのデバイスをカバーする非常に広範なリストです）。

私が最初に計画したように、以下で十分です（overflow-xは単なる保険です）：

body {
     overflow-x:hidden;
     width:100%;
}

ただし、position：absolute、left：100％、width：100％の2番目のレベルのnav要素があり、これにより、電話の実際のWebサイトの幅が歪んでいました（Webサイトの幅が非常に広くなり、おそらく電話の解像度と同じ幅になります） 。

要素の左側の位置がJavaScriptによってのみ設定されると（最初のWebサイトのロード時に電話で読み取られるのではなく）、問題は解決しました。

学んだ教訓は、オーバーフローが隠されている場合でも、携帯電話の位置絶対要素に注意することです。これらは、電話で認識される実際のサイト幅を歪める可能性があります。

電話用のメタビューポートも含める必要がありました...iPadのWebサイトのスケーリングの答えとしても広く受け入れられていますが、width = device-widthと初期スケールを使用すると、実際にはiPadのportrait-landscape-portrait間のWebサイトのスケーリングが台無しになります。 （最新のOS）。

それがないということは、スケーリングが完全に機能することを意味します！iPhone（最新のOS）でテストして、iPadのように動作するかどうかを判断する必要があります（向きのバグが修正される予定です）。

<meta name="viewport" content=""/>
<script>
if (!navigator.userAgent.match(/iPad/i)) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = 'width=device-width, initial-scale=1';
    }
}
</script>
于 2013-03-29T07:00:07.883 に答える