Categories ホームページ制作(技術情報)

レスポンシブWebデザイン上でのWindows Phone / Surface Pro対応について考える

win7レスポンシブWebデザインのブレークポイントが下記のような感じで、

  1. 1023px
  2. 767px
  3. 479px

Surface Proの縦横表示で横幅1024pxで表示してほしい場合、Surface ProのIE10/IE11では、metaタグのviewportは効かないので、下記のような指定でよいらしい。

@media screen and (max-width: 1024px) {
    @-ms-viewport {
        width: 1024px;
    }
}

詳しくは、Microsoft Developer Network「デバイスの適合」をご参照ください。

しかし、これでは、こんどは、Windows Phone8のIE10/IE11で、上記のCSSが効いてしまって横幅1024pxで表示されてしまいます。そこで、下記のように(半ば強引に)JSでCSSの指定を無効かさせる対応すればよいらしいです。

if(("-ms-user-select" in document.documentElement.style && navigator.userAgent.match(/IEMobile/))){
    var msViewportStyle = document.createElement("style");
    msViewportStyle.appendChild(
        document.createTextNode(
        "@-ms-viewport{width:auto!important}"
        )
    );
    document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}

元ネタ：Responsive Design in IE10 on Windows Phone 8

Windows Phone / Surface Proのいずれも実機の検証環境がないので、確かな情報ではありませんが、Windows Phoneのエミュレータ上ではたしかにこのJSがないと、CSSが適用されてしまいます。

しかし、Surface Proの縦表示した際の横幅は何pxなんだろう？　おそらく1080pxあたりだと思うんですが・・・ネット上に情報がすくないので、困りますね。わたしが実機を持っていればいろいろと実験できるのですが・・・