本篇文章由:http://xinpure.com/javascript-to-determine-page-anyway-screen/

Html5 流行至今,自适应的网站已经多如牛毛,但是横竖屏的切换依然还是影响用户体验的一个重点(在网页中,竖屏的用户体验显然是高于横屏的)。

使用 orientation 判断横竖屏

我们可以通过 JS 的 window.orientation 来判断当前网页窗口的方向

<script type="text/javascript">
function testOrientation() {
if (window.orientation == 90 || window.orientation == -90) {
alert('现在是横屏, 请切换到竖屏以获得最佳浏览体验!');
}
else if(window.orientation == 180 || window.orientation == 0) {
alert('现在是竖屏, 浏览效果最佳!');
}
}
window.addEventListener('onorientationchange' in window ? 'orientationchange' : 'resize', testOrientation, false);
</script>

这样的话,当用户切换到横屏的时候,我们就可以,提示用户切换回竖屏,更好的浏览网页。

Javascript 判断网页横竖屏的更多相关文章

  1. zepto判断手机横竖屏

    var CheckOrientation = (function(){ var win = $( window ), get_orientation, last_orientation, initia ...

  2. 用JavaScript判断横屏竖屏问题。JavaScript代码如下【转】

    /判断手机横竖屏状态: function hengshuping(){ if(window.orientation==180||window.orientation==0){ alert(" ...

  3. 用JavaScript判断横屏竖屏问题

    判断手机横竖屏状态: //判断手机横竖屏状态: function hengshuping() { if(window.orientation == 180 || window.orientation= ...

  4. JavaScript判断横屏/竖屏

    /判断手机横竖屏状态:  function hengshuping(){    if(window.orientation==180||window.orientation==0){          ...

  5. JS判断手机横竖屏

    在移动端开发时,有时候需要判断手机的横竖屏,那么就需要用到window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态. 屏幕方向对应的window.orientat ...

  6. js 判断手机横竖屏的实现方法(不依赖任何其他库)

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. CSS3(@media)判断手机横竖屏

    @media all and (orientation : landscape) { h2{color:red;}/*横屏时字体红色*/ } @media all and (orientation : ...

  8. 用Javascript开发网页截屏插件

    实现思路用html2canvas.js将元素转换成canvas,在将canvas转成图片. html2canvas(document.body, { onrendered: function(canv ...

  9. 使用JavaScript判断手机是处于横屏还是竖屏

    移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态.从而根据实际需求而执行相应的程序.通过添加监听事件onorientationch ...

随机推荐

  1. [Codeforces-div.1 809C] Find a car

    [Codeforces-div.1 809C] Find a car 试题分析 莫名结论:\(a_{i,j}=(i-1) xor (j-1) +1\) 然后分成\(i\space xor\space ...

  2. 【模拟退火】poj1379 Run Away

    题意:平面上找一个点,使得其到给定的n个点的距离的最小值最大. 模拟退火看这篇:http://www.cnblogs.com/autsky-jadek/p/7524208.html 这题稍有不同之处仅 ...

  3. Integer引用类型问题

    public class TestMain { public static void main(String[] args) { Integer integer = 2; go(2); System. ...

  4. 看看如何解决“SQL Server只能使用Windows身份登录,不能使用sa等Sql server身份进行登录”的问题

    今天安装Sql Server之后,出现SQL Server只能使用Windows身份登录,不能使用sa等Sql server身份进行登录的问题是由于sql server只设置了Windows身份验证, ...

  5. 深入解析SQL Server并行执行原理及实践

    http://dbaplus.cn/news-21-431-1.html

  6. meteor学习-- #一 安装meteor快速使用

    下载安装 curl https://install.meteor.com/ | sh meteor会自动下载mongodb和其他需要依赖的库,不需要手动安装. 如果是Windows 的用户,请使用 m ...

  7. OpenShift应用镜像构建(4) - fabric8-maven-plugin

    适合开发的构建fabric8-maven-plugin 在项目过程中越来越多的出现在开发阶段就需要把部分微服务直接做容器化发布,然后自己的代码还需要和这些发布后的微服务进行调用的开发过程,这个阶段基本 ...

  8. 客户端实现负载均衡:springCloud Ribbon的使用

    Netfilx发布的负载均衡器,是一个基于http.tcp的客户端负载均衡工具,具有控制http.tcp客户端的行为,为ribbon配置服务提供者的地址后,ribbon就 可以经过springClou ...

  9. Log4net的一点改进

    昨天把log4net更新了一下,发现从NUGET上安装log4net后,使用方式简化了许多.以前我在文章<log4net使用简介>中介绍过,使用log4net需要有两步前期准备工作: 在使 ...

  10. 如何Oracle查出一个用户具有的所有系统权限和对象权限

    1. 系统权限 SELECT * FROM DBA_SYS_PRIVS WHERE GRANTEE = 'LCAM_SYS_1216' UNION ALL SELECT * FROM DBA_SYS_ ...