横幅でHTMLを切り替えたい！

ユーザーエージェントからHTMLをきりかえるのではなく、横幅（ピクセル）を把握してHTMLを切り替えたいのですが、なにか方法はありますか？

行動規範の内容に同意します

回答5件

レスポンシブWebですね。
レスポンシブWebを作成する場合は大雑把に
１．自力で作成する(jsやUserAgentで分岐)
２．フレームワークにデザインを合わせる
という判断が必要となります。

bootstrapを使用すると最大12カラムと言う考えでデザインします。
widthが大きい場合は1行12カラム、widthが小さい場合は2行6カラムなど設定できます。

http://getbootstrap.com/css/

他のフレームワーク等もありますので、どれを選択するかは一度動かしてみて判断してはどうでしょうか

投稿2016/05/17 04:23

編集2016/05/17 04:25

mosapride

総合スコア1480

レスポンシブを採用しない場合、閲覧デバイスごとに横幅(px)を取得して、表示させるHTMLを変えたい場合には、以下のようにjQueryを使用して実装できます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initialscale=1">
<!-- 略 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<style>
  #element1,
  #element2{
    display:none;
  }
</style>
</head>
<body>
  <div id="element1">480px以下で表示</div>
  <div id="element2">480px以上で表示</div>
<script type="text/javascript">
$(function(){
  var deviceWidth = $(window).width();
  if(deviceWidth < 480){
    $('#element1').css('display', 'block');
  } else {
    $('#element2').css('display', 'block');
  }
});
</script>
</body>
</html>

投稿2016/05/17 06:51

編集2016/05/17 06:54

callmehappening

総合スコア91

Media Queries じゃダメですか？

投稿2016/05/17 06:09

chiro.0519

総合スコア118

UserAgent はサーバサイドでも判定できますが (クライアントサイドでも取得可能)、横幅はクライアントサイドでしかわかりません。ブラウザがリサイズされたり、携帯端末なら向きを変えたり、で横幅が変化しますし。
ということで、通常は JavaScript で動的に HTML をいじることになると思います。

投稿2016/05/17 03:52