[B! css][device] ytkwsmのブックマーク

サクッと読める話題 - ネット等様々な話題を誤報を防ぎながら更新

京アニ放火事件を受けて、メルカリに京アニ関連グッズ出品が急増しています。しかし中には高額すぎる出品があったり、そもそもメルカリで京アニグッズ …

ytkwsm 2015/05/08

iPad を除外したいのであれば、if 文を以下のようにします。 if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0) || navigator.userAgent.indexOf('Android') > 0)

リンク

読込むjavascriptファイルをユーザーエージェントによって振り分け切替える - Qiita

※ほとんどメモレベルです。気にしないでください。 ●ちゃんと動きます。 ●もっとイイ表記があるかも知れません。 ●変な所はご指摘頂けると嬉しいです。 ●一応operaで分けちゃってます。（意味ない？）ブラウザで分ける PC、スマホ、タブレットを判別。スマホの場合はbrowser,chrome,firefox,旧opera,iphoneで分ける。そもそも何故、分けたのか。 ●スマホで見た場合、表示差異がかなりあった。 ●AQUOSフォンがそもそもの発端。 AQUOSフォンだけ、なぜか全体的に小さく表示される。 viewportで【 target-densitydpi=220 】を指定すると表示が統一された。 ●その他の機種はそんなに問題はなかった。やっかいになった… こうした事で、androidのデフォルトブラウザとchrome、fox、またiphoneとの間で大きな差異が生まれてし

ytkwsm 2015/05/08

リンク

株式会社ジェイクール【ホームページ更新代行・制作】

スマートフォンやタブレットでのアクセス時に異なるcssを読み込ませるシーンはよくありますが、異なるjavascriptを読み込ませることもあると思います。 UA判別でjavascriptファイルを変えようとサクッと下記を記述したところ、 <script> (function(){ var _UA = navigator.userAgent; if (_UA.indexOf('iPhone') > 0 || _UA.indexOf('iPod') > 0 || _UA.indexOf('Android') > 0) { document.write('<script type="text/javascript" src="/js/sp.js"></script>'); }else{ document.write('<script type="text/javascript" src="/j

ytkwsm 2015/05/08

というわけで、「document.write」部、javascriptソース記述の閉じタグの/を半角の￥マークでエスケープし、文字列として認識させます。

リンク

ENTEREAL

ただ、この現状だと幅が768ピクセル未満は全て同じと見なされるので、iPhoneの縦と横で同じレイアウトになってしまいます。そのため現状だと、@media only screen and (min-device-width: 320px) and (orientation: portrait) { /* CSS Here */ }など、メディアクエリで対応するしかないのですが、もっと簡単にレイアウトできればということで調べたところ、もちろんBootstrap側でカスタマイズ出来るオンラインルーツが用意されていました。 ※ Customize and downloadのページから自由なブレイクポイントでカスタムしたCSSが作れます。でも、これをパッと見て理解できる人は多くはないハズ。ですよね。ということで、簡単に実現する方法として、480pxでもう一つブレイクポイントを作ることができる