RWD : してログ

画像の幅を 100% にすると、親要素いっぱいにストレッチされますが、元画像の解像度以上に拡大したくないときがあります。そんなときは、width と max-width を使い分けると良いです。

拡大もさせたいときは width
width: 100%;
拡大させたくないときは max-width
max-width: 100%;

サンプル

画像の原寸サイズはどちらも 600x400 になっています。ウィンドウサイズを変化させてみると分かりますが、max-width の場合は原寸サイズ以上に拡大されることはありません。

width: 100%
max-width: 100%

Microsoft Edge のタブレットモードでは、実際のディスプレイサイズがいくつであっても、device-width が 1024px になるようです。 このため、メディアクエリでレスポンシブ・ウェブ・デザインをしていても、多くの場合は PC サイトが表示されます。 所有している7インチ・タブレット(800×1280)の場合、横幅 1024px を 800px に縮小されて表示されるので、文字等が小さくなってしまいました。 試しに、JavaScript で screen.width を調べると、縦でも横でも 1024px を返します。

訳が分からないのが、デスクトップモードだと実ウィンドウ幅を返すという点です。 このため、デスクトップモードで最大化したときの表示と、タブレットモードとで表示されるデザインが異なるという結果となっています。 ネットで調べてもこれぐらいしか無いので、あまり認識されていない問題かも知れません。 今のところ、縮小されて見にくいときは、表示倍率を操作してスマホ向けのデザインに切り替えて利用するしか無さそうです。

それにしても、Edge でモダンブラウザとなるのかと思ったら、やっぱりマイクロソフトはインターネットの癌ですね。 Windows10 も酷いもんだし、デスクトップは Windows7 で固定してもらって、それ以降はタブレットとデスクトップを分けて OS を開発してもらいたいものです。

IEでは meta の viewport 指定が効きませんが、CSS に書いても無視されるので何でかなと思っていました。 検索しても特にそんな報告は見当たらないし、みんな同じことしか書いてないので八方塞がりになっていました。 試行錯誤の結果、分かったことは「width=device-width」という書き方で問題なく、「width=1280」のような書き方では無視されるということ。 でも何となく「width=1280px」のように単位を入れてみたら、IE でちゃんと認識してくれました。 画面のサイズを指定するということで「入るのはピクセル単位だけ」という思い込みが、なかなかその考えに至らなかったということになります。

IE では下記のように書いても無視される
<meta name="viewport" content="width=device-width">
有効なCSSの記述例
@-ms-viewport {
  width: device-width;
}
無効なCSSの記述例
@-ms-viewport {
  width: 1280;
}
有効なCSSの記述例(単位pxが必要なだけ)
@-ms-viewport {
  width: 1280px;
}