サイト作成で質問です。

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

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/08/24 16:23:54
  • 終了:2013/08/31 16:25:06

回答(4件)

id:windofjuly No.1

うぃんど回答回数2625ベストアンサー獲得回数11492013/08/24 17:32:25

ポイント25pt

スマホ側の負担が大きいので本来はサーバー側で切り替えるべきですが、
スマホ側でという要望なので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

id:holoholobird No.2

holoholobird回答回数574ベストアンサー獲得回数1042013/08/24 17:34:26

ポイント25pt

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

id:windofjuly

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

2013/08/24 17:52:02
id:dawakaki No.3

だわかき回答回数797ベストアンサー獲得回数1222013/08/24 19:32:29

ポイント25pt

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

id:boost_beast No.4

boost_beast回答回数785ベストアンサー獲得回数312013/08/31 15:57:49

ポイント25pt

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

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません