HTML5，Javascreen如果纵向/横向显示图像

我正在寻找脚本来检测屏幕是横向还是纵向而不旋转手机（初始屏幕大小，如果需要）以显示图像以旋转设备如果游戏是横向的（并且页面的初始负载是纵向的）。HTML5，Javascreen如果纵向/横向显示图像

我发现了很多关于“orientation orientation”事件的信息，但没有发现页面初始加载时的视图。

2015-10-05 bruno

可能重复[检测视口方向，如果方向是肖像显示警告消息，建议用户使用说明]（http://stackoverflow.com/questions/4917664/detect-viewport-orientation-if-orientation-is-portrait- display-alert-message-ad） – OddDev

只需做一个简单的检查，看看当前宽度>当前高度。如果是这样，你是风景，否则你是肖像......不知道什么是“Javascreen”，但使用Javascript，你可以使用'window.innerWidth'和'window.innerHeight'。 –

@ Pot-Nut，正确..什么重复问题的标记答案说..但我不知道这是最好的答案..我确定有一个窗口属性的HTML5规范的方向..或一个用于工作草案的polyfill。 –

您可以

function isPortrait() { 
    if (typeof (window.orientation) != 'undefined') { 
    return (window.orientation === 0 || window.orientation === 180); 
    } 
    else { 
    return (window.innerHeight > window.innerWidth); 
    } 
}

测试它是否支持window.orientation属性，如果它是不是检查，如果窗高度大于窗口宽度尝试。

编辑。 window.orientation比宽度和高度测试更受欢迎，因为在移动设备上当屏幕键盘弹出窗口高度变化时会给出错误的横向信息。

编辑。您也可以使用媒体查询，但如果您选择的浏览器不支持它，则无论您选择哪种方式，都一定要有后备功能。

http://caniuse.com/#search=matchmedia

来源

2015-10-05 15:11:58

，只要你想就执行这个。

if (window.matchMedia("(orientation: landscape)").matches){ 

    //Go landscape 
}; 
else { 

    // Go portrait 
}

警告：这会给你浏览器的方向。不是设备。所以，我认为浏览器已经最大化，可以自动适应您设备的屏幕。

Google针对“媒体查询”获取有关媒体更改的更多信息。

来源

2015-10-05 15:12:51

HTML5，Javascreen如果纵向/横向显示图像

回答

相关问题