2013年8月26日月曜日

【Windows8.1 RP】RT版のIEは横スクロールを避けるように作られている

Modern UI(旧称:Metro Style)のIEは横スクロールを避けるように作られている.
可能な限り.

今回のエントリは画像がメイン.
(領域の)大きい画像が続くので拡大しないと分かりづらいかも.

Webサーバを作っていて,クロスブラウザのレイアウトを目指すため
いろいろなブラウザで動作を確認していたのだが,
Modern UI版IEの挙動が面白かったのでメモ.

Modern UIといえばWindows8で導入された
フルスクリーンアプリのプラットフォームである.

他のモバイルプラットフォームでは同時起動アプリは1つのものが多いが,
Modern UIでは左右どちらかに細長い画面でアプリを配置して,
狭い領域と広い領域の2つまで同時にアプリを表示させることができる.
これをスナップというのだが,
Windows8ではそのスナップする狭い領域のアプリの幅は固定されていた.
Windows8.1(Preview)ではそのスナップが進化し,
アプリの幅をユーザがある程度自由に動かすことができるようになった.
これは過去のエントリでも書いている.

そこで,フルスクリーン状態のIE,スナップ状態のIEと
いろいろなサイズで独自Webサーバの挙動を見てみて,
レイアウト崩れが起きないか確認していた.

今回テストで用意したHTMLファイルの内容は以下のとおりである.


青の領域は本来のディスプレイの半分の領域で,
今回使用しているディスプレイが1920x1200なので,960x1200の領域である.
赤の領域はナゾの領域(後述)で1024x1295の領域である.
緑の領域は何でもいいから大きいの,ということで,
4k2kの3840x2160の領域である.

まずはフルスクリーン状態(幅1920)で表示するとこんな感じ.
青領域下部の枠線がぴったり表示されているのが分かる.
フルスクリーン状態


次に,その状態からだんだんと幅を狭くしていこう.
幅1397
幅1397


幅1308
幅1308


…と綺麗に幅のみが縮小しているのが分かる.
幅を削ったのだから幅が減るのは当然で,
この挙動がWebUIとして想定される挙動である.

先ほどの状態から更に幅を減らすと,
幅を自由に決められず,
自動的にディスプレイの半分のサイズになる領域になる.

アプリとアプリの間にスペーサーがあるのでディスプレイの丁度半分の幅ではないが,
幅949
ディスプレイの半分の幅


さて,ここで高さが変わってしまった.
(アプリの高さが青線よりも高くなった…というか縮小された)
後述すると書いたナゾの領域の幅・高さになったのである.
この赤領域の数値はナゾであって,
HTMLで指定した値はピクセル調整して丁度になった値なのである.

そこから更に幅を狭めていくと,
より縮小が進んで
幅811
幅811


幅569ではとうとう4k2kサイズの高さに並び,
幅569


最終的には
幅320(これ以上は縮小できない)
最小幅


こんな状態になった.
特筆すべきなのは縮小率は固定で,
半分の状態の赤枠の幅が表示されたまま縮小されていく.

つまり,Modern UI版IEでは
スナップ幅がディスプレイの半分以下になると
その幅のまま表示が縮小される.
幅が固定なので,変な作りにしない限り
横にスクロールすることはほぼないだろう.
ただし,幅を狭くしていくと表示倍率が下がっていくため,
文字が豆粒になっていくのである.
読めない…

0 件のコメント:

コメントを投稿