viewportの設定を学ぶ

 基本、レスポンシブデザインで制作する時は、viewport設定はシンプルな設定で大丈夫。
 Google Developersによると、推奨される設定方法は

<meta name=viewport content="width=device-width, initial-scale=1">
これで、端末幅に応じて設定される。

 弊社でレスポンシブデザインで制作した「タカハラ整形外科クリニック」。

 問題はPCサイトとスマホサイトを作り分ける際の設定。
 最近はウェブマスターツールで「viewportが設定されていません」と怒られるので、viewportを設定したほうが良いみたい。
 ただし、大手のいくつかのサイトを見て回ったけども、パソコンサイトの場合はviewportの設定がされていないところが多かった。

 スマホサイトの場合、先に書いた設定で問題なく動作するように作るほうがいい。
 スマホの場合、縦・横で見た時の横幅のサイズが変わるから、柔軟に動く形が望ましい。
 PC向けの場合、そこにはiPadなどのタブレット型の端末で見た際にも正常表示されるのが望ましい訳で、下記のような記述がいいのではないかと考えてる。

<meta name=viewport content="width=1000, initial-scale=1">

 赤字にした部分を臨機応変に変更したらいいのでは?というのが昨日の結論。

コメント

このブログの人気の投稿

AWSのS3をLinuxでマウントして、更にWindowsで利用

ネットショップをやるのにWeb制作以外に必要なこと

InvoicePlaneの利用