ソースが取れるもののみ
誰かスマホ対応くずは作ってくれないかな…
いきなりスマホ用画面を作れと言われても難しいと思うので、5分あればできるちょっとはましになる「微温い」対策をまとめます。
AndroidのGoogle Chromeなどでくずはすくりぷとのフォントサイズがおかしくなることがある。
<HTML> <HEAD> <TITLE>$headtitle</TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </HEAD> ↓ <HTML> <HEAD> <TITLE>$headtitle</TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <STYLE> HTML { max-height: 100%; -webkit-text-size-adjust: 100%; } </STYLE> </HEAD>とすることで対策できる。
html { max-height: 100%; -webkit-text-size-adjust: 100%; }を追加する。
PC向けのページはスマフォなどで表示するとサイズが小さく表示されるため、一々拡大しないと見辛い。
viewportはスマフォ対応サイトを作るときに必ず必要となる。
これを適用すると適切な大きさで表示され、小さな画面で見易くなる。
<HTML> <HEAD> <TITLE>$headtitle</TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </HEAD> ↓ <HTML> <HEAD> <TITLE>$headtitle</TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META name="viewport" content="width=device-width,initial-scale=0.7" /> </HEAD>とすることで対策できる。
<meta name="viewport" content="width=device-width,initial-scale=0.7" />を追加する。
initial-scaleは1.0でも良いですが、大きくなり過ぎてしまうので0.6〜0.8くらいにしておきましょう。
せっかくviewport設定しても、桁が多い(横が長い)投稿は、水平罫線からはみ出してしまい、小さな画面では見栄えや操作性が悪くなる。
<HTML> <HEAD> <TITLE>$headtitle</TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </HEAD> ↓ <HTML> <HEAD> <TITLE>$headtitle</TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <STYLE> PRE { white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; white-space: pre-wrap; word-wrap: break-word; } </STYLE> </HEAD>とすることで対策できる。
pre { white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; white-space: pre-wrap; word-wrap: break-word; }を追加する。
<HTML> <HEAD> <TITLE>$headtitle</TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </HEAD> ↓ <HTML> <HEAD> <TITLE>$headtitle</TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META name="viewport" content="width=device-width,initial-scale=0.7" /> <STYLE> HTML { max-height: 100%; -webkit-text-size-adjust: 100%; } PRE { white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; white-space: pre-wrap; word-wrap: break-word; } </STYLE> </HEAD>とする。
<META name="viewport" content="width=device-width,initial-scale=0.7" />を追加し、
html { max-height: 100%; -webkit-text-size-adjust: 100%; } pre { white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; white-space: pre-wrap; word-wrap: break-word; }を追加する。