部分的にtableレイアウトが使用されたサイトのレスポンシブ化の際にtableをdisplay:blockで落とすという手段をよく使うが、主にiPhoneで期待通りの挙動を示さない場合がある。
その原因は次の3つが考えられる
display:blockを当てられてない
次のようなソースに対して、table,th,td { display:block; width:100%; }としても落ちず横幅100%にもならない場合がある。
<table>
<tr>
<th></th>
<td></td>
</tr>
</table>
なぜかというと、trにdisplay: table-rowが効いているし、ブラウザで描写される際にtbodyが生成されるためである。
tableをblockにするには table,tbody,tr,th,td { display:block; width:100%; } としなければならない。
ビューポートの指定を間違えている
正しいビューポートの指定は次の通り。
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
ちなみに自分の場合は次のように指定している。
<meta name=”viewport” content=”width=device-width”>
device-widthが指定されている場合、暗黙的にinitial-scale=1になる。明示的に指定するか否かは好みの問題だと思う。
宣言が間違っている
cssもビューポートも合っているのにtableへのdisplay:block;が効かない場合がある。その場合は宣言が間違っている可能性がある。
「<!DOCTYPE HTML PUBLIC “-//W3C//DTD～というようなHTML4やXHTMLの宣言が使用されていた場合、iPhoneのSafariをはじめとする一部環境ではビューポートの指定が効かず、メディアクエリで指定したスタイルが効かないという現象が起こる。
次の宣言文を使用することで、期待通りの表示になる場合がある。
<!DOCTYPE HTML>
に宣言変えたらiPhoneで正常に描写されました。
悩んでたので助かりました。ありがとうございます！