8

電話専用の一般的なレスポンシブ メタ ビューポート () を設定する方法はありますか? そのmetaタグなしでズームアウトした Web サイトは、7 インチ以上のタブレット、縦向き、横向きで問題なく表示されますが、小さなデバイスでは少し不便でした。

そのため、携帯電話で希望どおりに機能させるには、タグを使用する必要がありました<meta name="viewport">。これにより、いくつかのメディア クエリが大型のデバイスで問題を解決する必要がありました。

電話でそのタグを設定する方法はありmetaますか?大きなデバイスではデバイスのデフォルトのズームアウトビューだけですか?

ありがとう！リッチ

4

3 に答える 3

11

これのこと<meta name="viewport">ですか？

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

その場合は、に追加された次のスクリプトを試してください(ここ<head>から取得および適応):

if(navigator.userAgent.match(/Android/i)
  || navigator.userAgent.match(/webOS/i)
  || navigator.userAgent.match(/iPhone/i)
  || navigator.userAgent.match(/iPad/i)
  || navigator.userAgent.match(/iPod/i)
  || navigator.userAgent.match(/BlackBerry/i)
  || navigator.userAgent.match(/Windows Phone/i)) {
    document.write('<meta name="viewport" content="width=device-width, user-scalable=no" />');
}

これは、ブラウザがモバイルであることをユーザー エージェントが示しているかどうかを検出し、必要に応じてそのメタ ビューポートを書き込みます。

于 2013-08-08T21:25:12.423 に答える
4

実際には、これはより良い解決策かもしれません: 画面が指定よりも大きい場合に値を変更するメタ ビューポート タグの後にスクリプトを追加します。

<meta id="testViewport" name=viewport content="width=device-width, initial-scale=1">
<script>
if (screen.width > 590) {
    var mvp = document.getElementById('testViewport');
    mvp.setAttribute('content','width=980');
}
</script>

このスクリプトにはさまざまなバリエーションがあります。たとえば、固定値ではなく、実際の画面幅をビューポートとして設定できます。

于 2016-01-04T15:45:55.867 に答える