Javascript 判断网页横竖屏
本篇文章由: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 判断网页横竖屏的更多相关文章
- zepto判断手机横竖屏
var CheckOrientation = (function(){ var win = $( window ), get_orientation, last_orientation, initia ...
- 用JavaScript判断横屏竖屏问题。JavaScript代码如下【转】
/判断手机横竖屏状态: function hengshuping(){ if(window.orientation==180||window.orientation==0){ alert(" ...
- 用JavaScript判断横屏竖屏问题
判断手机横竖屏状态: //判断手机横竖屏状态: function hengshuping() { if(window.orientation == 180 || window.orientation= ...
- JavaScript判断横屏/竖屏
/判断手机横竖屏状态: function hengshuping(){ if(window.orientation==180||window.orientation==0){ ...
- JS判断手机横竖屏
在移动端开发时,有时候需要判断手机的横竖屏,那么就需要用到window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态. 屏幕方向对应的window.orientat ...
- js 判断手机横竖屏的实现方法(不依赖任何其他库)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- CSS3(@media)判断手机横竖屏
@media all and (orientation : landscape) { h2{color:red;}/*横屏时字体红色*/ } @media all and (orientation : ...
- 用Javascript开发网页截屏插件
实现思路用html2canvas.js将元素转换成canvas,在将canvas转成图片. html2canvas(document.body, { onrendered: function(canv ...
- 使用JavaScript判断手机是处于横屏还是竖屏
移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态.从而根据实际需求而执行相应的程序.通过添加监听事件onorientationch ...
随机推荐
- SPOJ Time Limit Exceeded(高维前缀和)
[题目链接] http://www.spoj.com/problems/TLE/en/ [题目大意] 给出n个数字c,求非负整数序列a,满足a<2^m 并且有a[i]&a[i+1]=0, ...
- 【kd-tree】hdu5992 Finding Hotels
比较裸的kd-tree,但是比较考验剪枝. 貌似除了经典的矩形距离剪枝之外, 还必须加个剪枝是某个矩形内的最小价格如果大于价格限制的话,则剪枝. #include<cstdio> #inc ...
- HMACSHA1算法的JAVA实现
import javax.crypto.Mac; import javax.crypto.SecretKey; import javax.crypto.spec.SecretKeySpec; publ ...
- NHibernate 之持久化类、拦截器 (第二篇)
一.持久化类中成员标量的要求 作为被NHibernate使用的持久化类,必须满足以下几点要求: 1.声明读写属性 在NHibernate的使用中,持久化类的成员变量必须声明对应的属性,NHiberna ...
- 离线安装ocp3.11需要注意的事情
检查阶段 运行部署前检查的时候 # ansible-playbook -vv playbooks/prerequisites.yml 需要看看play recap是否全过,如果不过需要定位原因,反复执 ...
- 十.spring-boot添加jsp支持
1.创建maven web project: 2.在添加web依赖 3.配置application.properties支持jsp 4.添加一个controller类 5.加入jsp页面 6.启动类 ...
- 玩转Google开源C++单元测试框架Google Test系列(gtest)(转)
转自:http://www.cnblogs.com/coderzh/archive/2009/04/06/1426755.html 前段时间学习和了解了下Google的开源C++单元测试框架Googl ...
- 2017.12.11SimpleDateFormat的线程安全性讨论
转载来自:http://blog.csdn.net/zxh87/article/details/19414885 1.结论 DateFormat和SimpleDateFormat都不是线程安全的.在多 ...
- VB 在Visio 2010 以编程方式创建子进程图
在2010年Visio以编程方式创建子进程图 Office 2010 https://msdn.microsoft.com/en-us/library/gg650651.aspx 简介: 学习如 ...
- 浏览器兼容性问题解决方案之CSS,已在IE、FF、Chrome测试
当前主浏览器的核心是什么? 1) Trident:IE浏览器使用的内核,该内核程序在1997年的IE4中首次被采用,是微软在Mosaic代码的基础之上修改而来的,并沿用到目前的 IE7.Trident ...