スマートフォンとパソコンで表示スタイルを変える方法


無料ホームページではじめるPHPプログラミング

スマートフォンは画面が小さく、パソコン用に作ったサイトですと、見にくくなってしまいます。
スマートフォンとパソコンで、スタイルシートを変える方法はないか?調べてみました。

画面の幅が650以下はphone.css、651以上はpc.cssで表示するようにしています。
スマートフォンでは自動で縮小してしまうので、viewportの行を追加して、縮小しないようにしています。
この方法を使えば、パソコンとスマートフォンのページを同時に作れます。

<meta name="viewport" content="width=device-width,initial-scale=1.0">

<link rel="stylesheet" href="phone.css" type="text/css" media="screen and (min-width: 0px) and (max-width: 650px)">
<link rel="stylesheet" href="pc.css" type="text/css" media="screen and (min-width: 651px)">






PHPプログラミング


東京散歩写真



Ads by Sitemix