本篇文章由: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. SD 一轮集训 day4 圣城鼠

    非常强的构造题. 很显然的是我们要构造一个类似菊花图的东西,因为这样的话两点之间路径的点数会非常少,很容易满足第二个条件. 但是因为直接菊花图的话会不满足第一个条件,,,所以我们可以构造一个类菊花图. ...

  2. BZOJ 4327 JSOI2012 玄武密码(后缀自动机)

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=4327 [题目大意] 求每个子串在母串中的最长匹配 [题解] 对母串建立后缀自动机,用每 ...

  3. 【最小割】【Dinic】Gym - 101128F - Landscaping

    http://blog.csdn.net/lxy767087094/article/details/68942422 #include<cstdio> #include<cstrin ...

  4. 【动态规划】CDOJ1651 Uestc的命运之旅

    要处理从四个角出发的答案.最后枚举那个交点,然后讨论一下来的方向即可. #include<cstdio> #include<algorithm> using namespace ...

  5. 【状压DP】BZOJ2734-[HNOI2012]集合选数

    已经八月份了药丸,开始肝作业并且准备高考啦!! [题目大意] <集合论与图论>这门课程有一道作业题,要求同学们求出{1, 2, 3, 4, 5}的所有满足以 下条件的子集:若 x 在该子集 ...

  6. bzoj 1433: [ZJOI2009]假期的宿舍

    1433: [ZJOI2009]假期的宿舍 Description Input Output Sample Input 1 3 1 1 0 0 1 0 0 1 1 1 0 0 1 0 0 Sample ...

  7. [bzoj1012](JSOI2008)最大数maxnumber(Fenwick Tree)

    Description 现在请求你维护一个数列,要求提供以下两种操作: 1. 查询操作.语法:Q L 功能:查询当前数列中末尾L个数中的最大的数,并输出这个数的值.限制:L不超过当前数列的长度. 2. ...

  8. 【MySQL笔记】解除输入的安全模式,Error Code: 1175. You are using safe update mode and you tried to update a table without a WHERE that uses a KEY column To disable safe mode, toggle the option in Preferences -> SQL Queries and reconnect.

    Error Code: 1175. You are using safe update mode and you tried to update a table without a WHERE tha ...

  9. [转]MySQL 数据类型(二)

    MySQL 的数值数据类型可以大致划分为两个类别,一个是整数,另一个是浮点数或小数.许多不同的子类型对这些类别中的每一个都是可用的,每个子类型支持不同大小的数据,并且 MySQL 允许我们指定数值字段 ...

  10. 原生js封装的一些jquery方法

    用js封装一些常用的jquery方法 记录一下 hasClass:判断是否有class function hasClass(ele, cls) { if (!ele || !cls) return f ...