先日、レスポンシブ案件でスマートフォンの実機のみ一部のタグにスタイルが適用されない現象が発生しました。かなり珍しい現象だったので忘れないように記述しておきます。
経緯
先日、既に公開されている既存ページを簡易的にレスポンシブ化させる案件を担当しました。
PC閲覧時のみでしか最適化されていないHTML 4.01で宣言している10年くらい前に作成されたようなページです。
「基本的にbodyタグ内のソースとCSSだけ編集して作業するように」
との指示を受けたのでCSSファイル内でメディアクエリを使用して作業を進めました。
難なく作業を終え、デベロッパーツール上では問題ないことを確認。
続いてスマホ実機で確認するタスクへと移りました。
そこで、tableに関わるタグ全てにdisplay blockが効いていないことが発覚しました。
発生した不具合
メディアクエリ内に記述したtable、th、tr、tdタグへのdisplay blockが効かない。iOS、Android、バージョンに関係なく効かない様子です。
※メディアクエリ外で記述しても効きませんでした
発生した不具合の原因
色々検証したのですが、元々記述されていたDOCTYPEにDTD（文書型定義）がなかったことが問題のようです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
はダメで
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
ならOK上記のようにTransitionalの表記を追記することでスタイルが効くようになりました。
最近の新規作成時はHTML5で宣言することがほとんどなので気にしていませんでしたが、ファイルの一部を改修してレスポンシブ化しようとするような時は、こんな問題が発生することもあるようです。
スタイルが効かなくなるのはあまり無いパターンなのでかなり焦りました。
ただ、以前にも古いDOCTYPE宣言が原因で崩れが発生した経験があったので
気が付くきっかけとなりました。やはりWEB制作において経験は貴重な財産になります。
今回の経験も、将来直面するトラブルで活きることになるかもしれません。
一応、下記にDTDがある時と無い時の状態でデモページを用意しました。
▼DOCTYPEにDTD（文書型定義）をつけてスタイルが効いているケース
>> DEMOはこちらから！
▼スタイルが効いていないケース
>> DEMOはこちらから！
追記
iOSのバージョンによってはDTD（文書型定義）を記述していなくても効きました(iOS8)
う～ん、不思議な現象ですね・・・
スポンサーリンク