本篇文章由: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. JZYZOJ1539[haoi2015]T2 树链剖分

    http://172.20.6.3/Problem_Show.asp?id=1539 在学校的OJ又写了一次,RE了好多次,原来haoi的时候这道题需要开栈+快读,裸数据结构30分,加上快读50分.o ...

  2. AGC 022 C - Remainder Game

    题面在这里! 显然权值是 2^i 这种的话就是要你贪心,高位能不选就不选. 并且如果 % x 之后再去 % 一个>=x的数是没有用的,所以我们可以把操作的k看成单调递减序列. 这样的话就是一个有 ...

  3. 【动态规划】【滚动数组】【搜索】Playrix Codescapes Cup (Codeforces Round #413, rated, Div. 1 + Div. 2) D. Field expansion

    显然将扩张按从大到小排序之后,只有不超过前34个有效. d[i][j]表示使用前i个扩张,当length为j时,所能得到的最大的width是多少. 然后用二重循环更新即可, d[i][j*A[i]]= ...

  4. [转]Android的ADT与SDK的区别

      adt只是一个eclipse的插件,里面可以设置sdk路径     SDK(Software Development Kit): 一般是一些被软件工程师用于为特定的软件包.软件框架.硬件平台.操作 ...

  5. 【泡咖啡1】linux下caffe编译以及python环境配置手记

    caffe是一个深度学习的库,相信搞深度学习的话,不是用这个库就是用theano吧.要想使用caffe首先第一步就是要配置好caffe的环境.在这里,我主要说的是在debian的linux环境下如何配 ...

  6. pycharm直接连接mysql数据库

    1.找到view---Tool windows -- Database 2.连接 3.输入地址,账号,密码 4.如果不能使用证明少安装了插件 点击直接安装插件 5.这样就直接能在pycharm中点击刷 ...

  7. 网站服务管理系统wdcp系列教程之九

    在我们安装了网站服务管理系统wdcp之后,在使用过程中可能会出现这样或那样的疑问,下面给大家整理几点出来,方便大家学习.还有不懂得话,可以去wdlinux论坛找找相关教程. 1.wdcp如何拒绝或阻止 ...

  8. Composer安装和laravel下载

    1 下载Composer http://www.phpcomposer.com/ php我先选的是5.5.38的, 但是 laravel5.1 PHP版本 >= 5.5.9 laravel5.2 ...

  9. (转)C++ STL中的vector的内存分配与释放

    C++ STL中的vector的内存分配与释放http://www.cnblogs.com/biyeymyhjob/archive/2012/09/12/2674004.html 1.vector的内 ...

  10. Web API使用记录系列(三)Web API与Owin

    还好在坚持,今天继续更新第三篇随笔----使用owin来启动WebAPI(这里还是以IIS为宿主,当然也可以使用别的如Console.Windows Server等) 关于OWIN(Open Web ...