人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

サイト作成で質問です。
PCのサイトをjavascriptを使用し、iPhoneを始めとした、スマートフォンで、画面を最適化する方法を教えて下さい。
スワップなどせずに1画面で見れるようにしたいのです。


●質問者: makocan
●カテゴリ:インターネット
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● うぃんど
●25ポイント

スマホ側の負担が大きいので本来はサーバー側で切り替えるべきですが、
スマホ側でという要望なのでjavascriptでcssを切り替える方法を…。
http://qiita.com/tabo_purify/items/e0210a1df321e9091a59

iphoneとipodは iphone.cssを読み込む
androidは android.cssを読み込む
その他は pc.cssを読み込む

<script>
(function(){
 var _UA = navigator.userAgent;
 if (_UA.indexOf('iPhone') > -1 || _UA.indexOf('iPod') > -1) {
 document.write('<link rel="stylesheet" href="/css/iphone.css">');
 }else if(_UA.indexOf('Android') > -1){
 document.write('<link rel="stylesheet" href="/css/android.css">');
 }else{
 document.write('<link rel="stylesheet" href="/css/pc.css">');
 }
})();
</script>

判別にはユーザーエージェントに含まれている文字列を用いています。

他機種のユーザーエージェントについては過去質問を参照
http://q.hatena.ne.jp/1329069916#a1131649


2 ● holoholobird
●25ポイント

各要素をタイル状に並べて、画面の大きさなどでタイルの表示方法を切り替えるレイアウトを行うjqueryがあります。
http://isotope.metafizzy.co/
http://black-flag.net/jquery/20121128-4371.html
ためしにサイトを表示後、ブラウザの横幅を縮小してみてください。


うぃんどさんのコメント
悪くないんだけどjQuery使うとサイトが重くなって閲覧者減るかも…。

3 ● だわかき
●25ポイント

レスポンシブWEBデザインを用いて、外部CSSを一枚追加するだけでiPhone/androidに最適化することができます。
http://mnemoniqs.com/web/one-css-smartphone/


4 ● boost_beast
●25ポイント

http://shutto.com/
これはどうでしょうか。

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ