14

このタグをWeb ページの head に入れました:

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

何らかの理由で、私の iPhone では単に無視されているように見えます。追加しuser-scalable=noても効果はありません。幅、初期スケールなどの多くの値を試しました...何も効果がないようです。

誰がこれを引き起こしているのか知っていますか? ヘッダーにあることがソースではっきりとわかります。

私のiPhoneはiOS7です。

編集:問題は iOS6 で xcode ios シミュレーターを使用してまだ発生しているため、iOS7 が原因ではないと思います。

4

6 に答える 6

44

それは働いています！あなたが使用しているあなたのページで：

<meta content="width=640, initial-scale=0.47, maximum-scale=1.0, user-scalable=1" name="viewport">

携帯電話 (ios7 iphone5) でページを開くと、まさに正しい結果が表示されます。

コードに次のコードを入れようとしたことを 100% 確信していますか?

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

無視されません。

更新1

あなたのコードでは、2 番目のビューポートを使用しているように見えますが、おそらく JavaScript によって 640px ビューポートに変更されます。それが、無視されているように感じる理由かもしれません。実行時にビューポートが変更されるため...

更新2

問題が見つかりました。

function updateWidth(){
    viewport = document.querySelector("meta[name=viewport]");
    if (window.orientation == 90 || window.orientation == -90) {
        viewport.setAttribute('content', 'width=1401, initial-scale=0.34, maximum-scale=1.0, user-scalable=1');
    }
    else {
        viewport.setAttribute('content', 'width=640, initial-scale=0.47, maximum-scale=1.0, user-scalable=1');
    }
}

あなたのページは、ビューポートをオーバーライドするこの関数を呼び出しています。その機能を知っていましたか？

于 2013-10-06T13:18:33.543 に答える
4

ビューポートの幅は、多くのデバイスで異なります。iOS は 320、Android はポートレート モードで 360 です。横向きモード - お使いのデバイスによって異なります。幅が異なります。

ウェブサイトをモバイル向けに最適化する最良の方法は、width=device-width に設定することです。initial-scale=1.0 を設定しない場合 - デバイスの回転を変更すると、iOs は画面を拡大 (拡大) します。

必要なのはこのメタだけです。

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

ズーム機能を無効にしたい場合は、user-scalable=no を設定します。

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

縦向きモードと横向きモードで同じ幅が設定されるため、幅プロパティをハードコーディングしないでください。これは、ユーザー エクスペリエンスを非常に不快なものにします。

最高の文書化: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

iOS 7 について さらに言えば、今のところ iOS 7 について心配する必要はありません。非常に多くのバグがあります。こちらをお読みください: http://www.sencha.com/blog/the-html5-scorecard-the-good-the-bad-and-the-ugly-in-ios7/

于 2013-09-29T17:00:13.307 に答える
2

ios7がメタタグを正しく認識していないようです。ここに役立つリンクがあります。

iOS 7 で webapp が適切にスケーリングされない

http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review

于 2013-09-29T18:30:24.963 に答える
-1

以下のコードを使用します。

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

私のプロジェクトの多くでうまく機能します。

于 2013-09-29T14:27:09.967 に答える