レスポンシブルデザインにおいてのwidthについて

既存のPC用のHPをスマホ対応するお仕事を受注したときに出た問題。

 

開発終了と、サーバーにアップしてから実機で色々と確認をしていると、

android端末(Experia Z5)でChromeからPC表示をした場合に表示が崩れている。。。

CSSが効いていない?

PCで表示、PCエミュレータで表示、スマホで表示は全部うまくいくのに、、、

 

今回のスマホ対応では、既存でHTMLファイルが存在しているので、適用するCSSを切り替えてレスポンシブルデザインにするという方法で改修を行っていました。

 

方法としてはヘッダに

<meta name=”viewport” content=”width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no”>

<link rel=”stylesheet” type=”text/css” href=”css/style.css” media=”only screen and (min-device-width:768px)” />

<link rel=”stylesheet” type=”text/css” href=”css/styleSp.css” media=”only screen and (max-width: 767px)” />

と記述してwidthで適用するCSSを切り替えていた。

 

色々調べているうちに、

http://girigiribauer.com/tech/20131113/

のページに遭遇。

 

なるほど、、、っていうかなんで”min-device-width:768px”と”max-width: 767px”が混在しておるん。。。

 

両方にdeviceを付与して、スマホからはPC表示を選択してもスマホページが表示されるように修正。

(そもそもスマホからPCサイトを表示させたい人って少ないよね、、、少ないよね?)

 

若干サイズは変わるけど、、、(もしかしたらスマホのOSかブラウザが他にも何かを自動的に調整している??)

 

とりあえずはこれで解決。。。

コメント