BBRK 13-11-30
BBRK を改良してみた
iPhone5 を使うようになって以来、ずっと気になっていたのが BBRK の iPhone上での表示。
明朝体が気に入らない。ゴシック体のほうが読みやすいので、変えたいなぁ〜。
表示が小さすぎ。読めるサイズまでわざわざピンチアウトして拡大しないといけないのが面倒。
ちょっと時間が出来たので Try してみた(笑)
.htaccess に仕込んだり、JavaScript を使わなきゃいけないのかと思っていたら、意外と簡単で、METAタグと CSS に記述を追加するだけで対応できちゃいました(笑)
とはいえ、動的にページ内の配置を変えるようなことは全くやっていなくて、フォントをゴシック体にしたのと、最初から画面横いっぱいに広がるようにした、その他細部調整くらい。
で、あんまりよろしくないんですが、横幅は 700ピクセル固定の指定としてます。
これが一番しっくりくるんですよねぇ。PC での表示と同じイメージですし。
拡大は自由に出来るようにしていますので、この文字サイズじゃ小さいよ〜という方はピンチアウトして拡大してくださいな。
+ + + + +
以下、めもめも。
HTML側は viewport を追加。
<META NAME="viewport" CONTENT="width=700">
CSS側は @media screen and (max-device-width: 480px) の条件で PC用に設定した属性を上書き。
METAタグの viewport が解釈できるデバイス（PCのブラウザ以外?）で、画面の横幅いっぱいに表示されます。
解像度の高いタブレットではものすごく大きく表示されてるかも(苦笑)
Screen Sizes の DEVICE-WIDTH が 480px より小さいデバイスで CSS側の設定が有効になるので、iPhone以外のデバイスでもゴシック体になっちゃいます。
でも、android のブラウザはデフォルトがゴシック体ですよね? なので、変化ないと思います(笑)
iPhone 標準ブラウザ Safari は、なんでデフォルトが明朝体なんですかね〜。
