ツイート
2012.01.21
Webサイトの表示を「パソコン、iPhone、Android、iPadなど」で切り替える方法
うちのサイトをiPhoneやスマホなどの画面の小さな端末で見た場合に少しでも見やすいように、右側のメニューが下に回り込むようにしてみました。どうでしょうか？
以下、方法に関する個人的メモ。
切り替えの判断は「ブラウザの横幅で判定」することにしました。
JavaScriptで取得出来るブラウザの横幅の数値には以下の4種類がある。
しかしやっかいな事に、取得できるパラメーターはブラウザによって異なる(1) (2) (3) (4) Firefox3.6 取得可 取得可 取得可 取得可 IE8 undef 0(ゼロ) 取得可 undef Firefox(Android) 取得可 取得可 取得可 取得可 Dolphon Browser(Android) 取得可 取得可 取得可 取得可 Android純正ブラウザ(横向き) 981 980 980 取得可 iPhone4(横向き) 981 980 980 480 iPhone4(縦向き) 980 980 980 320 iPad(横向き) 981 980 980 1024 iPad(縦向き) 980 980 980 768 iPhone3GS(横向き) 268 ? 464 ? iPhone3GS(縦向き) 320 ? 304 ? BAUM(ケータイモード) 231 undef 231 undef BAUM(デスクトップモード) 231 undef 231 undef
もうカオスorz。しかも(3)はheadに書いても取得出来ずbodyに記述した時のみ取得可能
そこで試行錯誤の結果、うちのサイトではbody部分に
-------------------------------
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var width2= window.outerWidth;
if (width>width2 && width2>0){width=width2};
if (width>800){
画面が広い場合に行う処理
}
-------------------------------
というスクリプトで表示を切り替えています。
iPhoneが端末によって仕様が異なるしiPhone4ではwindow.outerWidthに使えそうな数字を返す＆その他に980という謎仕様のため、少しややこしくなっています。
アドバイスあったらよろしくお願いします。
Category:Perl・Javascript・python、サーバー管理メモ
コメント
いいっすね！=3
001 [01.21 20:38]ぬるぽ(´ω｀)★1:JavaScriptをモバイルサイトに使うこと自体がトラブルのもとになっているような…(´・ω… ↑(1)
002 [01.21 20:42]あう@So-net:auのガラケーで見ると崩れています。 ↑(1)
003 [01.21 20:49]７７４ＲＲ@OCN:UAで判定してCSSを切り替える方法じゃいかんのでせうか。 ↑
004 [01.21 20:52]ふぇちゅいん TW★40:>>001 いつの時代でつか。 >>003 新しい端末が出るたびに追加するのは面倒っつ ↑
005 [01.21 21:13]macのsafariで@Asahi-Net:他サイトからtarget="_blank"付きのリンクで飛んでくると表示が崩れるな。理屈がわからんけど。 ↑
006 [01.21 21:18]web屋:はじめてこのサイトのソース見た。Media Queries使いなはれ。Media Queriesに対応していない古いIE系用に作った上で、Media Queriesで他のブラウザ用に横幅等修正したCSSを適応させればいい。 ↑
007 [01.21 21:27]名乗る程の者ではない:最初表示が崩れてた。冷静に考えたら、firefoxの拡張機能NoScriptがJavaScriptを抑制してた。 ↑
008 [01.21 21:38]ふぇちゅいんさんふぁん(ねむねむ)★46:なんでJavaScriptを使うの？ Scriptを走らせるためにウェブサイト運営してるの？ ちがうでしょ。 ↑
009 [01.21 21:38]とくめーい:Opera無視とか酷すぎる ↑
010 [01.21 21:52]匿名さん:menu2のflat:right外して、topのwidthを外してmax-widthとmin-widthで構成してやればいい感じになると思うけど。あとはmenu1も下にやりたかったら、menu1とmenu2をdivでまとめてtopの横に置いてやればいい。それと、今時JavaScriptでデザイン弄るのも「いつの時代でつか。」の部類ですよ。 ↑
011 [01.21 22:18]ふぇちゅいん TW★40:max-widthにmin-widthなんて便利なものがあるんだ。勉強になります。色々と表示のオンオフを切り替えたいコンテンツもあるのでJavascriptは使う方法でいく予定です。ficebookのブログパーツとかスマホではオフで良いかと。これをオフにするのはjavascriptしか無いよね？ ↑
012 [01.21 23:42]えく@UQ:該当記事よりも読み込みが多いんじゃないかというソーシャルプラグインてんこ盛りのページが多くなると、むしろJavascriptをオフにしたくもなる。 ↑
013 [01.22 08:05]京ポン3B(意地でもエッジ)★13:掲示板が一番下にあると思ったら、一番上にあったのでよかった。 by lenobo A1 ↑
014 [01.22 08:25]とくめい★25:切り替えない選択もできるのか？ ↑
015 [01.22 11:38]2:あうのガラケーでも崩れずに見れるようになりました。ありがとうございます。 ↑
016 [01.22 12:45]ふぇちゅいん TW★40:>>014なるほど切り替えボタンは実装したいですね。 ↑
017 [01.22 12:46]ふぇちゅいん TW★40:>>013 右のメニューを２つに分け、スマホでも使いたい物を上、重要度の低い物を下にしました。 ↑
018 [01.23 12:26]＃:006でも言ってるけど、@media screen and (max-width:xxx){}でがんばれ ↑
019 [01.23 12:27]＃:あと、jsガシガシ覚えるのめんどくさいからjQueryあたりのライブラリ使うのが吉じゃないかと。捗るぞ ↑
020 [01.23 16:55]似非Webクリエーター?:>>3のよ様にperlでUA毎にｽﾀｲﾙｼｰﾄのパス切替えれはいいんじゃない？そこは面倒くさがらない！！iOS,Android,WIN32,MACOS,その他くらいで分岐かな。 ↑
021 [01.24 00:32]ふぇちゅいん TW★40:max-width使ってみた。こりゃ便利だ♪。 >>020 androidのタブレットとスマホを見分けられないよ。 ↑
→カテゴリー：Perl・Javascript・python、サーバー管理メモ(記事数:83)
アクセス数の多い記事(過去1ヶ月)
