Q&A
ありがとうございます。polyfillライブラリ…か。
興味深い。
レスポンシブデザインを採用した場合、サイズに合ったレイアウトにしてくれるのは有難いのですが、入力オブジェクトの切り替えに関してはどのようにしているのかを教えて頂きたく。。。
例えば日付入力。(datepicker)
PCブラウザは新旧様々あることからbootstrap-datepickerがいいなと思っていますが、スマホはinput[type=date]がいいなと思ったりします。
サンプルコード
lang
1<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 2<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/bootstrap-datepicker.min.css"> 3 : (省略) 4<div class="container"> 5 <form class="form-horizontal"> 6 <div class="form-group"> 7 <label class="col-sm-2 control-label">input[type=text]</label> 8 <div class="col-sm-10"> 9 <input id="date1" type="text" maxlength="10"> 10 </div> 11 </div> 12 <div class="form-group"> 13 <label class="col-sm-2 control-label">input[type=date]</label> 14 <div class="col-sm-10"> 15 <input id="date2" type="date"> 16 </div> 17 </div> 18 </form> 19</div><!-- /.container --> 20 21<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 22<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 23<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.min.js"></script> 24<script> 25$(function() { 26 $('#date1').datepicker({ 27 format: 'yyyy/mm/dd', 28 autoclose:'true' 29 }); 30}); 31</script> 32</body>
以下、PCブラウザ。
![イメージ説明]WIDTH:445
以下、スマホ。
bootstrap-datepicker（左）だと、カレンダーもキーボードも出てきてしまう。
![イメージ説明]WIDTH:600
やっぱ条件分岐が入るのでしょうか？
フロントエンジニアさん、或いはフロントに強い方。
教えてください。
回答3件
0
投稿2015/07/07 11:26
編集2015/07/07 11:28
退会済みユーザー
総合スコア0
0
dateサポートがあればそれを使って、無ければJSで再現する、いわゆるpolyfillライブラリを使うとかですね。
https://github.com/chemerisuk/better-dateinput-polyfill
自分は面倒なので全てJSでやっちゃいましたが…
投稿2015/02/17 23:44
総合スコア1293
0
ベストアンサー
サーバー側(PHP)できるなら。出し分ければいいかと思いました。
lang
1<?php 2 3//モバイルだったら$mobileFlgをtrueに(モバイルフラグを立てる) 4$user_agent = $_ENV["HTTP_USER_AGENT"]; 5if(//ここから条件 6 //ユーザーエージェントにiPhoneという文字があるか 7 stripos($user_agent,'iPhone') !== false 8 ||//または 9 //ユーザーエージェントにAndroidという文字があるか 10 stripos($user_agent,'Android') !== false 11){//ここまでが条件 12 //↑の条件に当てはまれば、$mobileFlgをtrueに 13 $mobileFlg = true; 14}else{ 15 //それ以外はPC扱い。andoroidとiphone以外あるっけ？ 16 $mobileFlg = false; 17} 18 19?> 20 21<html> 22<head> 23 <title>スマホ出分け</title> 24</head> 25 26<body> 27<!--$mobileFlgがtrueなら--> 28<?php 29 if(true==$mobileFlg){//スマホ 30?> 31 32 <!--スマホのjavascript、またはhtml--> 33 スマホだよ 34 35<!--$mobileFlgがtrueでないなら--> 36<?php 37 }else{//PC 38?> 39 40 <!--PCの処理javascript、またはhtml--> 41 PCだよ 42 43<?php 44 }//if終了 45?> 46 47</body> 48</html> 49
調べたらjavascriptでもできますね(そもそもuseragentはクライアントの情報なので当たり前ですが)
http://html5-css3.jp/smartphone/pc-iphone-android-php-javascript-htaccess.html
ただ、同じくらいの難しさならサーバー側も覚えると色々できるからいいと思います。
投稿2015/02/17 13:13
編集2015/02/17 13:32
総合スコア61
ありがとうございます。やはりＰＨＰ。。。
６年越しの回答。（干したなぁ。。。）
自分が最初に思いついたのはこれと同じ解答なのですが、求めていたのは他の人が回答しているようなプラグインみたいなのでした。
しかし、あれからいろいろ作って思ったこと。
ブラウザの幅を変えることによってそのサイズにあったデザインに変わるのがレスポンシブだけど、PC上のブラウザの幅を短く変えたところで結局PCでしかないということ。
そしてスマホはスマホでしかないということ。
故にPCブラウザで幅を変えることにより入力オブジェクトをフロントで判定する必要性は必ずしもない。
故に最初にPCかスマホかが分かればのでサーバーサイドで判断して其れに応じたオブジェクトを出せばいいという結論に至りました。
ありがとうございました。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。