あなたを賢くするための技術的なヒント - モバイル -AppleデバイスのSafariのビューポートスケーリングのバグを修正[方法]

AppleデバイスのSafariビューポートスケーリングのバグを修正する[方法]

あなたがウェブデザイナーである場合、として知られているバグ視点のスケーリングは、Appleデバイス、つまりiPod、iPhone、iPadで発生する可能性があります。 Appleデバイスを縦向きから横向きに回転させると、サイトがズームインして、デバイスの幅よりも広い幅のビューが表示されることがあります。これは、デザイナーがビューポートの幅をデバイスの幅に設定したためです。このバグがどのように機能するかを理解できるように、サンプルページを設計し、iPadを縦表示から横表示に回転させました。

上記のバグの簡単な修正により、ビューポートメタタグの「maximum-scale = 1」。これで当面の問題は解決しますが、デバイスの幅と同様の最大幅を修正するため、ページはズームできなくなります。

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

この簡単な修正は、完璧なソリューションではありません。 @ mathias、@ cheeaun、@ jdaltonなどのデザイナーの努力により、永続的な解決策を得るために<head>セクションに追加できるjavascriptができました。このソリューションでは、ページはズーム可能のままになります。

<script type="text/javascript">
(function(doc) {
var addEvent = "addEventListener",
type = "gesturestart",
qsa = "querySelectorAll",
scales = [1, 1],
meta = qsa in doc ? doc[qsa]("meta[name=viewport]") : [];
function fix() {
meta.content = "width=device-width,minimum-scale=" + scales[0] + ",maximum-scale=" + scales[1];
doc.removeEventListener(type, fix, true);
}
if ((meta = meta[meta.length - 1]) &amp;&amp; addEvent in doc) {
fix();
scales = [.25, 1.6];
doc[addEvent](type, fix, true);
}
}(document));
</script>

これらは、デザイナーがこれまでに考案した唯一の既知のソリューションです。ただし、このバグを修正する別のバグがある場合は、コメントで共有してください。