検索
2012
2
2
『スマホ用のviewport設定が上手くできないんですけどーーー!!』の巻き
スマホサイトのviewportについて
スマホサイト制作で最初に「？」っていうポイントに『viewport設定』っていうのありますよね。
この基本の設定方はたくさんのサイトで紹介してくれているので省きますが、
それでも反映されない事ってありませんか？・・・無いですか・・・そうですか
そんなDAME DAMEなソースをdescriptionしちゃうKIDSに朗報だ！！ なんでもmeta要素で「content="width"」を指定せず、JavaScriptで次のように指定するとウィンドウサイズにあわせてzoomプロパティを使ってWebページを拡大縮小しちゃう事で 「content="width=640"」っぽい表現が可能だZE。
<script type="text/javascript">// <![CDATA[
$(window).bind('resize load', function(){
$("html").css("zoom" , $(window).width()/640 );
});
// ]]></script>
これで、自分の検証環境のAndroid機種のGALAXY S、〃SⅡ LTE、XPERIAでは設定できましたよ！ｷﾘｯ （もちろん4Sもできますけど、何か？）
var portraitWidth,landscapeWidth;
$(window).bind("resize", function(){
if(Math.abs(window.orientation) === 0){
if(/Android/.test(window.navigator.userAgent)){
if(!portraitWidth)portraitWidth=$(window).width();
}else{
portraitWidth=$(window).width();
}
$("html").css("zoom" , portraitWidth/320 );
}else{
if(/Android/.test(window.navigator.userAgent)){
if(!landscapeWidth)landscapeWidth=$(window).width();
}else{
landscapeWidth=$(window).width();
}
$("html").css("zoom" , landscapeWidth/320 );
}
}).trigger("resize");
これでほとんどの機種で横幅320pxに表示することができるそうです！ けど、新しいAndroidの画面サイズのデカさだとか・・・また苦しまされる日々が続きそうだZE!!
デメリット
上記のスクリプトはあくまでzoomプロパティでCSSのすべてのパラメーターを画面サイズを320px基準で割り出した値で見せているだけで、実際にjQueryのoffsetメソッドなどで要素の高さを取得しようとすると、正確な値は取れません。 パララックスなどページスクロール値でイベントを多様するページでは使えませんので注意追記
いまのところ使う予定はないですが、システム的にviewportを固定で指定できないことがある様で・・・ そんな時は動的にmetaの値を変更することで対応できるそうです これで、動的にmetaタグを追加しているので、どこでも追加、変更可能。
<script>
var meta = document.createElement('meta');
meta.setAttribute(<strong><span style="color: #ff0000;">'<a><span style="color: #ff0000;">name</span></a>'</span></strong>, 'viewport');
meta.setAttribute('content', 'width=initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=0');
document.getElementsByTagName('head')[0].appendChild(meta);
</script>
