Windows Phone中的固定宽度视口

时间:2014-03-14 11:29:00

标签: html css windows-phone-7 windows-phone-8 meta

我正在尝试在Windows Phone中使用固定宽度的视口。它在iOS中运行良好但由于某些原因它在Windows Phone中不起作用,尽管我尝试了不同的解决方案(meta name=MobileOptimized@-ms-viewport等)。

您可以在http://oran.ge/PzWxHX找到我的示例页面。

以下是iOS中的参考渲染:http://grab.by/v8IM

CSS:

.bouton {
    display: block;
    width:75%;
    margin:auto;
    padding: 10px 0;
    background:#f60;
    color:#fff;
    font:bold 14px sans-serif;
    margin: 10px auto;
    text-align: center;
    text-decoration: none;
}

h2 {
    font:bold 14px sans-serif;
    margin: 15px auto;
    text-align: center;
    text-decoration: none;

}
.snippet {
    width:208px;
    height:326px;
    overflow:hidden;
    background:#ffb280;
}
.snippet h2 {
    font: 16px Arial, sans-serif;
    text-align:left;
    margin: 5px 0 15px;
}
.affiches, .sorties {
    width:250px;
}
.affiche, .sortie {
    width:93px;
    height:122px;
    float:left;
    margin: 0 22px 22px 0;
}
.sortie {
    height:62px;
    margin-bottom:40px;
}
@-ms-viewport{width:208px}
@viewport{width:208px}

HTML:

<body style="margin:0;padding:0">
<div class="snippet">
<h2>sorties de la semaine</h2>

<div class="affiches">
<a href="page2.html" class="bouton affiche" data-zone="cine" data-method="top/bbar"></a>
<a href="page2.html" class="bouton affiche" data-zone="cine" data-method="top/bbar"></a>
<a href="page2.html" class="bouton affiche" data-zone="cine" data-method="top/bbar"></a>
<a href="page2.html" class="bouton affiche" data-zone="cine" data-method="top/bbar"></a>
</div>
</div>

1 个答案:

答案 0 :(得分:0)