スマホサイトのwidthをどう扱うか?
スマホサイトを作る際、ちょっとした問題が発生します。
それはiPhoneとandroidの違いと言いますか、ブラウザの横幅(width)の違いをどううまく切り抜けるか…です。
基本的な横幅(width)は320pxですが、androidの場合480pxの機種もあったりします。
viewportで「width=device-width」とすれば解決するように思えますが、残念ながら解決しないケースがあります。。
私の場合iPhoneで確認しながらスマホサイトを構築しているので、横幅(width)を320pxということでデザインを組んでいます。
しかし、横幅(width)が320pxよりも大きいandroidで閲覧するとデザインが崩れてしまいます。
viewportで「width=320」にするのは邪道というか、根本的な解決にはならないですね。。
cssを自在に扱える方であれば、横幅(width)の違いによってcssを振り分ける処理をするのでしょうが私はそこまでの知識がないので、少々面白い方法で解決しました。
デザインは横幅(width)320pxで作っておいて、それよりも大きい横幅(width)の機種でアクセスした際はその幅にサイト全体を拡大させる、という方法です。
複数のスマホ機種で表示確認しましたが、問題なくイイ感じで表示されていたので現時点ではこの対応で良しとしています。
ちなみに、この方法はjavascriptを用います。
;(function($){
var portraitWidth,landscapeWidth;
if(/Android/.test(window.navigator.userAgent)){
var changeEvent = "resize";
}else{
var changeEvent = "orientationchange";
$("body").width(320)
}
$(window).bind(changeEvent, function(){
if(Math.abs(window.orientation) === 0){
portraitWidth=$(window).width();
if(/Android/.test(window.navigator.userAgent)){
if(!portraitWidth)portraitWidth=$(window).width();
}else{
portraitWidth=$(window).width();
}
$("html").css("zoom" , portraitWidth/320 );
}else{
$("body").removeClass("portrait").addClass("landscape");
if(/Android/.test(window.navigator.userAgent)){
if(!landscapeWidth)landscapeWidth=$(window).width();
}else{
landscapeWidth=$(window).width();
}
$("html").css("zoom" , landscapeWidth/480 );
}
}).trigger(changeEvent);
})(jQuery);
専門家ではないので詳しい説明はできないのですが、このjavascriptを読み込ませることで横幅(width)320pxよりも大きい幅のスマホ機種で閲覧した場合は、サイト全体を拡大させることができます。
もっとうまい方法は他にあると思いますが、この方法も使えると思います。
PCサイトもスマホサイトも、ガラケーサイトも・・・機種やブラウザによって表示が違ってくる仕様はほんと辛いですね。。