mania-ku

何か作りたいプログラマ未満。

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

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

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

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

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

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

jQueryでなんとかする

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

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

まず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);
    });
}

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

Pocket
LINEで送る