![[PukiWiki]](image/zanteikun.gif "[PukiWiki]")
ソースが取れるもののみ
誰かスマホ対応くずは作ってくれないかな…
いきなりスマホ用画面を作れと言われても難しいと思うので、5分あればできるちょっとはましになる「微温い」対策をまとめます。
| 対策前 | 対策後 |
 |  |
| 拡大しないと見辛い。 | 適切な大きさで表示されていて見易い。 |
| 対策前 | 対策後 |
 |  |
| ピンチインして小さな文字を読むか、 小刻みにスクロールしながら読む必要がある。 | はみ出しそうな要素はブラウザによって適度にワードラップされている。 |
<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=1.0" />
<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; }
INPUT[type="text"],INPUT[type="number"],TEXTAREA { max-width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
</STYLE>
</HEAD>
とする。<META name="viewport" content="width=device-width,initial-scale=1.0" />を追加し、
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; }
input[type="text"],input[type="number"],textarea { max-width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
を追加する。
