2012.01.21
Webサイトの表示を「パソコン、iPhone、Android、iPadなど」で切り替える方法
うちのサイトをiPhoneやスマホなどの画面の小さな端末で見た場合に少しでも見やすいように、右側のメニューが下に回り込むようにしてみました。どうでしょうか？
以下、方法に関する個人的メモ。
切り替えの判断は「ブラウザの横幅で判定」することにしました。
JavaScriptで取得出来るブラウザの横幅の数値には以下の4種類がある。
- (1) window.innerWidth
- (2) document.documentElement.clientWidth
- (3) document.body.clientWidth
- (4) window.outerWidth
| (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のタブレットとスマホを見分けられないよ。 ↑
この記事のアクセス数:1701
2025.01.25正規表現のオンラインWebチェッカー
2021.12.05中国のSippedが50ドルQVGAののToFカメラユニットを今年中に出荷開始。UVC、UART/SPI出力3コメ
2021.12.05Pythonのコードをワンラインで実行形式に変換してくれるPyInstaller1コメ
2021.12.03チャート、グラフを書くのに良さそうなGoogle Chart以外のJavascriptライブラリ5つ3コメ
2021.11.18まだ使ってる？今は非推奨となったJavaScriptの書き方。document.writeが強く非推奨だと！！！？4コメ
2021.10.19PerlのGD::Image->new()は画像じゃないデータを読み込ませるとエラーになることがあるので事前に手動で画像であることを確認した方が良い1コメ
2021.10.12【解決済み】ヨドバシとかZOZOのサイトにどうやってもスクリプトからアクセス出来ない16コメ
2021.08.31現代的なPerlの記述方法一覧2コメ
2021.07.09JavaScriptでワンタッチで仮想キーボードを表示する2コメ
2021.02.10PythonでPowerPointを作るライブラリ「python-pptx」が色々活用出来そう。22コメ
→カテゴリー：Perl・Javascript・python、サーバー管理メモ(記事数:83)
アクセス数の多い記事(過去1ヶ月)
笳�2025.03.20:縺ｩ繧薙↑荳埼�蜷医′繝ｻ繝ｻ繝ｻ(譛ｪ蛻�｡�)681access
笳�2025.03.14:8蟷ｴ縺ｶ繧翫↓繧ｵ繝ｳ繝ｩ繧､繧ｺ蜃ｺ髮ｲ縺ｫ荵苓ｻ奇ｼ∝ｮｶ譌�4莠ｺ縺ｧ縲後た繝ｭ蛟句ｮ､縲�4驛ｨ螻九↓荳翫ｊ荵苓ｻ翫＠縺溘Γ繝｢(#縺翫〒縺九￠諠��ｱ)490access
笳�2025.03.16:螟ｧ驥上�繝ｬ繝｢繝ｳ繧剃ｽ吶＆縺壽棡豎∫ｵ槭ｋ縺ｮ縺碁屮縺励＞縲ょｮ峨＞邨槭ｊ蝎ｨ縺ｯ繧ｯ繧ｽ縺ｰ縺九ｊ(#閾ｪ螳�DIY #繝ｫ繝ｼ繝輔ユ繝ｩ繧ｹ豢ｻ逕ｨ)446access
笳�2025.03.11:蛻昴ａ縺ｦ縺ｮ辟ｼ縺崎ｉ縺阪ｓ縺撰ｼ育黄隱槭さ繝ｼ繝昴Ξ繝ｼ繧ｷ繝ｧ繝ｳ)縺ｮ譬ｪ荳ｻ蜆ｪ蠕�♀鬟滉ｺ句虻繧偵ご繝�ヨ��ｼ�ｼ�ｼ�ｼ∝━蠕��驟榊ｽ灘茜蝗槭ｊ蟷ｴ邇�3��ｨ句ｺｦ(#縺企≡ #繝槭ロ繝ｼ)365access
笳�2025.03.17:縺吶°縺�ｉ繝ｼ縺秋D縺ｮ譬ｪ繧貞穀讌ｭ縺励※44荳��繧ｲ繝�ヨ縲よ怙蠕後�譬ｪ荳ｻ蜆ｪ蠕�ｒ蜿鈴��(#縺企≡ #繝槭ロ繝ｼ)360access
