本篇文章由: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. 【哈希表】Ural Championship April 30, 2017 Problem H. Hamburgers

    题意:有n群人,每个人有喜欢的汉堡配方:有m家店,给出每家店的每个汉堡的配方,如果存在某个汉堡,其配料表包含某个人喜欢的配方,则这个人喜欢这个汉堡所在的店家.问你对每群人,输出被喜欢的人数最多的店面是 ...

  2. bzoj 1712: [Usaco2007 China]Summing Sums 加密

    1712: [Usaco2007 China]Summing Sums 加密 Description     那N只可爱的奶牛刚刚学习了有关密码的许多算法,终于,她们创造出了属于奶牛的加密方法.由于她 ...

  3. [JZOJ5426]摘Galo

    题目大意: 有一棵n个结点的树,每个点都有一个权值,你要从中选出不超过k+1个点使得权值和尽量大. 同时要注意如果一个点被选择,那么它的子树和这个点到根结点路径上的点不能被选择. 思路: 很水的树形D ...

  4. 用asyncio的异步网络连接来获取sina、sohu和163的网站首页

    代码如下: import asyncio async def wget(host): print('wget %s...' % host) connect = asyncio.open_connect ...

  5. mysq-binlog

    Auth: JinDate: 2014-04-23参考: http://dev.mysql.com/doc/refman/5.1/en/replication-options-binary-log.h ...

  6. java通过UUID生成16位唯一订单号

    import java.util.UUID; public class T { public static String getOrderIdByUUId() { int machineId = 1; ...

  7. MFC获取纸张大小

    BOOL CPrintView::GetPageSize(CSize &nRetVal)  // CPrintView 是自己创建的类       {          PRINTDLG FA ...

  8. iOS:Reachability网络监听

    iOS利用Reachability确认网络环境3G/WIFI 开发Web等网络应用程序的时候,需要确认网络环境,连接情况等信息.如果没有处理它们,是不会通过Apple的审查的,一般情况下,可以把网络监 ...

  9. 二八定律全面分析SEO全过程

    首先,大体的了解SEO的整个流程,SEO的整个流程无非是:关键词选定.标题标签描述的正确描写---内部优化----外链----内容---友情链接---更新. 在SEO界流行这样一句话:“内容为王,外链 ...

  10. http://www.cnblogs.com/zhengyun_ustc/p/55solution2.html

    http://www.cnblogs.com/zhengyun_ustc/p/55solution2.html http://wenku.baidu.com/link?url=P756ZrmasJTK ...