< 2024年03月 >
S M T W T F S
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            
プロフィール
kiriri店長・下田
kiriri店長・下田

スマートフォン対応です
パワーストーン ブレスレット kiririの店長をしております下田と申します。
多くの方にご愛用頂きまことにありがとうございます。
パワーストーンの魅力にはまって早15年。ひとりでも多くの方に魅力を知って頂きたいと思いkiririを立ちあげました。

ブレスレットに力を入れており、効果デザイン性に自信がございます。職人の手でひとつひとつ丁寧に組み上げており、品質強度にも自信がございます。
どうぞよろしくお願い申し上げます。
投稿下田裕也
パワーストーン ブレスレット kiriri
タグクラウド
パワーストーン   天然石   組み合わせ   パワーストーンブレスレット   効果   風水   浄化   アメジスト   ルチルクォーツ   アマゾナイト   運気アップ   人工石   アパタイト   ガーネット   ローズクォーツ   ピンクオパール   インカローズ   ロードクロサイト   アベンチュリン   シトリンクォーツ   ターコイズ   水晶   ムーンストーン   アクアマリン   タイガーアイ   翡翠   元旦   アンバー   プログラミング   カーネリアン   ラピスラズリ   ダイヤモンド   ブルーカルセドニ   ピンクカルセドニ   クリソコラ   宝石   品質   初詣   パワースポット   正月      ルビー   エネルギー   運気   ラリマー   相性   オニキス   カイヤナイト   タンザナイト      アラゴナイト   自作   ラブラドライト   鉱物   ネックレス   クリソプレーズ   アイオライト   オブシディアン   ミルキークォーツ   ヒスイ   クンツァイト   サファイア   トルマリン   スギライト   ヘマタイト   ペリドット   セラフィナイト   プレナイト   クセ   硬度      チャクラ   産地   動画   ブレスレット   スマホ   エメラルド   人気   コミュニケーション   モルガナイト   初夢   インテリア   サンストーン      誕生石   ハイパーシーン   金運アップ   開運詐欺   マラカイト   モリオン   ガーデンクォーツ   天眼石   リング   ストラップ   ブラッドストーン   スモーキークォーツ   ソーダライト   チャージ浄化   アクアオーラ   マザーオブパール  
最近のコメント
2012年12月20日

スマホサイトのwidthをどう扱うか?

iphone android

スマホサイトを作る際、ちょっとした問題が発生します。
それは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サイトもスマホサイトも、ガラケーサイトも・・・機種やブラウザによって表示が違ってくる仕様はほんと辛いですね。。

  


Posted by kiriri店長・下田 at 20:21Comments(0)サイト構築について