我的网站或多或少针对移动设备进行了优化,但它的最小宽度需要为480像素。 使用
<meta name="viewport" content="width=480">
运作良好,但仅限于纵向模式。如果我切换到横向,它也使用480像素,这使得一切都太大了。 如果使用横向(仅限移动用户),是否可以使用脚本切换到更高的宽度? 谢谢。
答案 0 :(得分:0)
您可以使用window.orientation或jQuery Mobile Orientation Event
http://www.w3schools.com/jquerymobile/jquerymobile_events_orientation.asp
<script>
function doOnOrientationChange()
{
switch(window.orientation)
{
case -90:
case 90:
alert('landscape');
break;
default:
alert('portrait');
break;
}
}
window.addEventListener('orientationchange', doOnOrientationChange);
// Initial execution if needed
doOnOrientationChange();
</script>
或JQuery
$(window).on("orientationchange",function(event){
alert("Orientation is: " + event.orientation);
});
然后您可以更改视频
document.getElementById("viewport").setAttribute("content","width=640");
答案 1 :(得分:0)
<meta id="myViewport" name="viewport" content="width=480" />
<script>
window.onload = function () {
if(window.innerWidth >= 480) {
var mvp = document.getElementById('myViewport');
mvp.setAttribute('content','width=device-width', 'initial-scale=1');
}
}
</script>
我用这个作为解决方案后,我意识到我忘记了平板电脑等更大的分辨率,这只会让我不得不做出十几个这样的步骤。它来自Why is CSS min-width causing my responsive site to be zoomed in on a mobile?。像魅力一样。
答案 2 :(得分:0)
您可以在CSS中使用@media查询以及@viewport CSS标记,而不是元视口标记。这里有一个很好的解释:
上述链接的一个例子:
@media (max-width: 699px) and (min-width: 520px) {
@viewport {
width: 640px;
}
}
您可以使用此功能为纵向和横向设置不同的视口,以及更通用的更窄和更宽的屏幕。