youtubeの動画をCSSでアスペクト比固定で表示する。

Android標準ブラウザとは??

Android4.4未満に標準搭載されているブラウザのことです。

名前がわかりづらいのですが、Chromeじゃない方の「ブラウザ」という名前のブラウザのことです。

以下のように通常ブラウザではきちんと表示されていても、Android標準ブラウザではかなり崩れてしまっています…。

通常ブラウザ

image.png

Android標準ブラウザ

image.png

気になるAndroid標準ブラウザのシェア率は…

2016年現在で、6%前後だそうです!!
多いわけではないのですが少なからず存在するので、きっちり対応したいですね!!

崩れる主な原因

  • calc()を使っている
  • 単位にvw vh を使っている。

↑の2つはどちらともAndroid標準ブラウザでは非対応なので
これらを使ってる場合にはそれぞれ対処が必要になります。

calc()を使っている場合

calc()を使っている場合は、calc非対応のブラウザ用に上に
pxや%などで指定してあげる必要があります。

width:95%;//Android
width:calc(100%-5px);

↑の例だど100%から5px引いています。
これだけだとAndroid標準ブラウザでは崩れてしまうので、
その上にcalcの時と近くなるようによしなに指定してあげましょう。

calc()が対応しているブラウザでは2行目のcssが、
非対応のブラウザでは1行目のcssが適用されるので崩れずにすみます。

vw vhを使ってる場合

vwとは画面幅に対する割合、
vhとは画面高さに対する割合です。
%だと親要素に対する割合なのですが、vw,vhはいつでも画面幅や高さに対する割合になります。

例えば、スマホサイトで画像の幅を画面幅に対して変えたい場合などはこれを使うと便利です。

しかし、こちらもcalcとほとんど同じで、Android標準ブラウザでは非対応なので、
pxや%などで指定してあげる必要があります。

width:20px;//Android
width:30vw;

calc()の場合と同じで、vh vwに応しているブラウザでは2行目のcssが、
非対応のブラウザでは1行目のcssが適用されます。

[紹介元] CSSタグが付けられた新着投稿 – Qiita youtubeの動画をCSSでアスペクト比固定で表示する。

関連記事