埋め込む YouTube 動画をレスポンシブに対応するには、
以下のようにします。
|
1 2 3 |
<div class="movie"> /* YouTube の埋込コード */ </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.movie{ position:relative; width:100%; padding-top:56.25%; } .movie iframe{ position:absolute; top:0; right:0; width:100%; height:100%; } |
ＰＣで表示した時にＴＥＬリンクを無効にするには、
以下のようにスタイルを指定します。
【HTML】
|
1 |
<a class="tel" href="tel:012-345-6789"> |
【CSS】
|
1 2 3 4 5 6 7 8 9 10 |
.tel { cursor: default; pointer-events: none; } @media screen and (max-width: 768px) { .tel { pointer-events: auto; } } |
原因は、ページが横スクロールすることのようです。
意図せずにページ内の要素がはみ出したりしていると、なかなか原因に気づかなかったりします。
IE8 以下で css3 セレクタを利用可能にする。
selectivizr
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
function is_android() { $ua = $_SERVER['HTTP_USER_AGENT']; if ( strpos($ua, 'Android') !== false ) { if ( strpos($ua, 'Mobile') !== false ) { $result = "スマホ"; } else { $result = "タブレット"; } } else { $result = "Android 以外"; } return $result; } |