web-dev-qa-db-ja.com

メタビューポートタグが完全に無視されるか、効果がないようです

このタグを ウェブページ の先頭に入れました：

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

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

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

私のiPhoneはiOS7上にあります。

編集：問題はiOS6でもxcode iosシミュレーターで発生しているため、iOS7が原因であるとは考えていません。

htmliphoneioscss
12
waffl

動いています！あなたが使用しているページで：

<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">

無視されません。

PDATE1

私はあなたのコードで私の第二のビューポートを使用しているように見えたのですが、おそらくJavaScriptによって640pxのビューポートに変更されます。それがあなたにとってそれが無視されるように感じる理由かもしれません。ランタイム中にビューポートが変更されるため...

PDATE2

問題が見つかりました。

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');
    }
}

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

31
Andreas Daoutis

これは非常に古い質問であることはわかっていますが、この問題が発生したときのGoogleでの最初の結果でしたので、iOS 10に関して更新すると思いました。

Appleがアクセシビリティを改善するためにiOS 10のuser-scalable=noを完全に上書きするようになりました

参照：Thomas FuchsのTwitter投稿

7
ConduciveMammal

一部のデバイスでは、ビューポートの幅が異なります。 iOSには320、Androidには縦長モードで360があります。横長モード-お使いのデバイスによって異なりますが、幅は異なります。

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

このメタだけで十分です。

<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">

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

最高のドキュメント： https://developer.Apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

iOs 7についてさらに私は言うでしょう-現在のところiOS7について心配する必要はありません。それには非常に多くのバグがあります。ここをお読みください： http://www.sencha.com/blog/the-html5-scorecard-the-good-the-bad-and-the-ugly-in-ios7/

5
Shekhar K. Sharma

回避策として、次のコードを試してください。

html { 
    zoom: .8; 
}
4
WvdW

Ios7がメタタグを正しく認識していないようです。ここにあなたを助けるかもしれないリンクがあります。

iOS 7ではwebappが正しくスケーリングされない

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

2
sourav

IOS 7についてはまだ心配する必要はありません。非常に多くのバグがあります： http://www.infoworld.com/t/html5/bad-news-ios- 7s-html5-full-of-bugs-227685

あなたのコードは完全に大丈夫ですが、iOSで問題がありますか？

1
user2836265

以下のコードを使用してください。

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

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

0
Fahim Parkar