577 views(since 2013/10/08)

Windows8 Phone(Nokia) のTwitterbootstrap の対応方法

通常はこのタグがあれば、PC/Iphone/Android 対応してくれますが。

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

なぜかWindows8 Phone だけ対応してくれない。

PCの画面が縮小された感じになる。

twitterbootsrap_Windows8Phone_0010

これにJavaScriptでおまじないをいれるとAndroid/IphoneのようにWindows8Phoneも対応してくれます。

twitterbootsrap_Windows8Phone_0020


 以下をHTMLのHeadに追加する。

<script type=”text/javascript” src=”/Scripts/Users/bootstrap-fix-winphone8.js”>

bootstrap-fix-winphone8.js 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>@ViewBag.Title - マイ ASP.NET アプリケーション</title>
 @Styles.Render("~/Content/css")
 @Scripts.Render("~/bundles/modernizr")

@RenderSection("scriptsHead", required: false)

<script type="text/javascript" src="/Scripts/knockout-3.0.0.js"></script>
 <script type="text/javascript" src="/Scripts/Users/bootstrap-fix-winphone8.js"></script>
</head>
<body>
 <div class="navbar navbar-inverse navbar-fixed-top">
 <div class="container">
 <div class="navbar-header">
 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 @Html.ActionLink("アプリケーション名", "Index", "Home", null, new { @class = "navbar-brand" })
 </div>
 <div class="navbar-collapse collapse">
 <ul class="nav navbar-nav">
 @*<li>@Html.ActionLink("Home", "Index", "Home")</li>*@
 <li>@Html.ActionLink("BB_1", "Todos", "Home")</li>
 <li>@Html.ActionLink("BB_2", "Todos_WebAPI", "Home")</li>
 <li>@Html.ActionLink("KO_0", "Knockout_Todos", "Home")</li>
 <li>@Html.ActionLink("KO_1", "Knockout_WebAPI1", "Home")</li>
 <li>@Html.ActionLink("KO_2", "Knockout_WebAPI2", "Home")</li>
 <li>@Html.ActionLink("SPA-010", "SPA010", "Home")</li>
 @*<li>@Html.ActionLink("About", "About", "Home")</li>
 <li>@Html.ActionLink("Contact", "Contact", "Home")</li>*@
 </ul>
 </div>
 </div>
 </div>
 <div class="container body-content">
 @RenderBody()
 <hr />
 <footer>
 <p>&copy; @DateTime.Now.Year - Exceedone Co., Ltd.</p>
 </footer>
 </div>

@Scripts.Render("~/bundles/jquery")
 @Scripts.Render("~/bundles/bootstrap")
 @RenderSection("scripts", required: false)
</body>
</html>

bootstrap-fix-winphone8.js 

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

Filed Under: .NETJavaScript

About the Author

野呂清二(ご連絡はこちらまで (http://www.exceedone.co.jp/inquiry/)

Leave a Reply




If you want a picture to show with your comment, go get a Gravatar.