【スマホ】画面を回転しても、viewportを320pxで固定したいとき

  • 投稿日
  • 著者 ituki
  • カテゴリー CSS
Pocket
LINEで送る

週末飲酒族です。夏だよ！ビールが（飲めないけど）うまい（らしい）！日本酒大好き！

viewportの固定はいろいろ試した結果、ギャラクシーS3とiPhoneがうまくいきませんでした。

<meta name=”viewport” content=”width=320″>のみ

<meta name="viewport" content="width=320">

ギャラクシーS3がリキッドのまま・・・

jQueryでなんとかする

to-Rさんの記事の（２種）を試したら、iPhoneがフォントサイズが小さいまま。
（もしかしたら、試しにやったやつなんか間違ってたのかも・・・）
http://blog.webcreativepark.net/2011/01/11-023827.html
http://blog.webcreativepark.net/2012/01/06-110622.html

上の２つをなんとかうまく融合する

まずviewportはiPhone向けに書く

<meta name="viewport" content="width=320">

アンドロイドのときは（ほんとはギャラクシーS3だけでいいんだけど。）、jQueryでviewport上書きつつzoomを指定。

※要jQuery

var agent = navigator.userAgent;
if (agent.search(/Android/) !== -1) {
    $('meta[name=viewport]').attr({'content': 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'});
    $(window).bind('resize load', function(){
        $("html").css("zoom" , $(window).width()/320);
    });
}

これでなんとか思いどおりになったと思う。
テストした機種の数少ないので、バグあるかも・・・

Android iPhone