css - iphoneサイトの表示不具合

Question

iphone5 と 4s でサイトが正しく表示されません。

URL は次のとおりです。http://www.mya.co.uk/nonsurgicaldev/index.html

電話が縦表示の場合、コンテンツは画面の幅に収まらず、横表示と縦表示の両方で、左側に大きな余白があり、右側には何もありません。

ページにフォームがあり、次のように元のチェックボックスを非表示にしました。

:root input[type=checkbox] {
position: absolute;
left: -6em;
}

これに何か関係があるのではないかと思ったのですが、チェックボックスの代替CSSを削除しましたが、まだ問題があります。

私が含めた：

<meta name="viewport" content="width=320" />
<script>
if (screen.width > 740) {
var mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=740');
}
</script>

私の頭のタグで。

誰でもこの問題で私を助けてくれますか? 大歓迎です。

Answer 1

これは iOS のバグです。かなり広く文書化されており、次の<meta>タグを使用して解決できます。

<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">

または、このWebdsigner ウォール記事にある JavaScript ソリューションを使用してください。