Japanese subtitles

← Initial Scale - OSP

Get Embed Code
4 Languages

Showing Revision 1 created 05/19/2014 by K2480.

  1. viewpointには別の制御方法があることを説明します
  2. initial-scaleプロパティで
  3. ブラウザの初期表示の拡大率を設定します
  4. デフォルト値は1でこれは変更しない方が無難です
  5. 他の数値に変更すると
  6. 初期ズーム率が変わってしまいます
  7. ユーザはパンやズームをする必要が出てきます
  8. initial-scaleには重大な使用方法が1つあります
  9. このページのようにiOSで幅だけを設定し
    initial-scaleを設定しない場合
  10. 画面を回転させるとiOSのWebエンジンは
  11. viewportの幅を同じに維持したまま
  12. 横向きに適応させて表示することになります
  13. 縦長の物を横に広く伸ばすのと同じです
  14. device-widthと設定してもiOSは
  15. 横向きに対応させて調整しています
  16. 興味深いのはこのページを先に横向きで読み込んでも
  17. 縦向きの幅だと認識してから
  18. 横向きに調整して表示している点です
  19. 次に同じページをviewportのmeta要素で
  20. device-width, initial-scale=1と設定します
  21. すると画面を回転させた時
    viewportのサイズが変化します
  22. これでウィンドウの幅が480ピクセルだと分かります
  23. これは横向きの時の幅で縦向きの幅ではありません
  24. つまりこれがviewportのmeta要素の
  25. 決まった形だと思ってください
  26. iOSが画面を回転させた時も適切に対応できるように
  27. initial-scaleの設定は必要なのです
  28. iPhoneで面白いことに気づきました
  29. initial-scaleが設定してある場合
  30. viewportのサイズも適切に調整されますが
  31. デフォルトのフォントサイズも変わります
  32. 横向きにすると実質的にテキストが拡大されます
  33. ページのデフォルトのフォントサイズを
  34. 設定した方がいいかもしれません
  35. リセットスタイルシートを
    まだ使ったことがないのであれば
  36. 試してみるのもいいでしょう