web-dev-qa-db-ja.com

iPhoneまたはiPad専用のビューポートを設定するにはどうすればよいですか？

IPhoneのビューポートに0.3の値を使用する必要があるが、iPadの場合は0.7を使用する必要があるWebサイトがあります。

IPhoneまたはiPadのみにビューポートを設定する方法はありますか？

iphoneviewport
15
Moon

これが1つの解決策です...

<!-- in head -->
<meta id="viewport" name='viewport'>
<script>
    (function(doc) {
        var viewport = document.getElementById('viewport');
        if ( navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) {
            viewport.setAttribute("content", "initial-scale=0.3");
        } else if ( navigator.userAgent.match(/iPad/i) ) {
            viewport.setAttribute("content", "initial-scale=0.7");
        }
    }(document));
</script>
28
Ross

JQueryで簡単な方法を見つけました！

これを<head>タグに追加します。

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<script>if ($(window).width() < 600) { $('meta[name=viewport]').attr('content','initial-scale=0.54, maximum-scale=0.54, user-scalable=no'); }</script>

<meta>タグはデフォルトのスケールを設定し、デバイスの画面幅が600ピクセル未満の場合（すべての電話デバイスは600ピクセル未満だと思います）、<script>タグはビューポートを書き換えます。

私はどこにも簡単な解決策を見つけることができなかったので、私はこれを思いついた:)

10
Sean

ご注意ください、 meta viewportはコンマ区切りのリストであるため、セミコロンは使用しないでください。

<meta name = "viewport" content = "width = 320,
       initial-scale = 2.3, user-scalable = no">

出典： Appleのドキュメントのビューポート構文 および ビューポートの構成– Apple記事

（もっと評判ポイントがあれば、コメントとして追加します）

8
babca

すべてのモバイルデバイスで、次のようなものを試してください。

<meta name="viewport" content="width=1024">
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
  if (/iphone|iPod|Android|blackberry|opera mini|opera mobi|skyfire|maemo|windows phone|Palm|iemobile|symbian|symbianos|fennec/i.test(navigator.userAgent.toLowerCase())) {
    $("meta[name='viewport']").attr("content", "width=640");
  }
</script>
5
tim

デバイス（iPhone/iPad）に基づいて異なるビューポートを設定する必要がある場合は、デバイス幅を使用してビューポートを設定する必要があります

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

上記のステートメントは、iPhoneでは320px、iPadでは768pxのビューポートを設定します。これは、woudldが0.3および0.7uに変換するものです。

これは機能しましたが、afterこの行が...セクションに入らないことに気づきました！私のばかげていますが、多分言われる必要があります。

ありがとう！

3
testndtv

Jqueryを使用するTimのスクリプトはうまく機能しているようです。私はそれを少し変更しました、そしてそれは私のために働くようです。いくつかのスケールパラメータを追加しました。それは私が私のページをiphoneとipadの両方でうまく表示するために必要な結果を私に与えました。これが私が追加したものです：

maximum-scale=2.0; user-scalable=1;
1
John

IPhoneのみにビューポートを設定できるかどうかはわかりませんが、メディアクエリを設定できるため、iPhoneのみにCSSを設定できると思います。

IPhone（320x480）またはiPad（1024x768）のデバイス幅のみにメディアクエリを設定することで、目的の機能を実現できる可能性があります。

0
Jack Marchetti

ページの読み込み時にサイト全体が正しくズームされるように初期ズームを動的に設定する方法については、以下の私の回答を参照してください（すべてのデバイスサイズで機能します）。

固定寸法要素を正確に表示するようにタブレットビューポートを変更

0
Osmaan Shah