我的网站或多或少针对移动设备进行了优化,但它需要的最小宽度为 480 像素。 使用
<meta name="viewport" content="width=480">
效果很好,但仅限于纵向模式。如果我切换到横向,它也会使用 480 像素,这使得所有内容都太大。 如果使用横向(仅限移动用户),是否有办法通过脚本切换到更高的宽度? 谢谢。
最佳答案
您可以使用 window.orientation 或 jQuery Mobile 方向事件
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);
});
然后您可以更改视口(viewport)
document.getElementById("viewport").setAttribute("content","width=640");
关于javascript - 横向和纵向的不同视口(viewport)宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29771158/