スマートフォンとパソコンでスタイルシートを変更
スマートフォンは画面が小さく、パソコン用に作ったサイトですと、見にくくなってしまいます。
スマートフォンとパソコンで、スタイルシートを変えています。
画面の幅が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)">
パソコン用スタイルシート
pc.css
body{
width:1100px;
padding:0px;
line-height:120%;
}
img{
border: 0px;
}
h1{
padding:5px;
margin:0px;
}
h3{
background-color:#7777ff;
padding:5px;
}
#h1{
width:1000px;
padding:10px;
}
#l1{
width:700px;
padding:10px;
float:left;
}
#r1{
width:300px;
padding:10px;
float:left;
}
#box1{
padding:10px;
}
スマートフォン用スタイルシート
phone.css
body{
line-height:120%;
}
H1{
line-height:120%;
}