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 ...
随机推荐
- 「NOI2018」归程
「NOI2018」归程 题目描述 本题的故事发生在魔力之都,在这里我们将为你介绍一些必要的设定. 魔力之都可以抽象成一个 >\(1\) 个节点. \(m\) 条边的无向连通图(节点的编号从 \( ...
- [Codeforces #196] Tutorial
Link: Codeforces #196 传送门 A: 枚举 #include <bits/stdc++.h> using namespace std; #define X first ...
- 【高斯消元】CDOJ1784 曜酱的线性代数课堂(二)
高斯消元求矩阵秩板子. #include<cstdio> #include<cmath> #include<algorithm> #include<cstri ...
- [BZOJ1004](HNOI 2008) Cards
Description 小春现在很清闲,面对书桌上的N张牌,他决定给每张染色,目 前小春只有3种颜色:红色,蓝色,绿色.他询问Sun有多少种染色方案,Sun很快就给出了答案.进一步,小春要求染出Sr张 ...
- [转]Android的ADT与SDK的区别
adt只是一个eclipse的插件,里面可以设置sdk路径 SDK(Software Development Kit): 一般是一些被软件工程师用于为特定的软件包.软件框架.硬件平台.操作 ...
- BaseLoadDataForNetFragment
/** * Fragment 加载网络请求 */ public abstract class BaseLoadDataForNetFragment extends Fragment { // 视图是否 ...
- [Android实例] 最全的Android开发资源整理--进阶必备
本帖最后由 一切随枫 于 2014-6-9 12:08 编辑 原文链接: http://stormzhang.github.io/android/2014/06/05/android-awesome- ...
- UIButton中的三个UIEdgeInsets属性
接着昨天的 UIButton中的三个UIEdgeInsets属性 ,今天我们具体谈谈UIButton的contentEdgeInsets.titleEdgeInsets.imageEdgeInsets ...
- OpenCV支持向量机SVM对线性不可分数据的处理
支持向量机对线性不可分数据的处理 目标 本文档尝试解答如下问题: 在训练数据线性不可分时,如何定义此情形下支持向量机的最优化问题. 如何设置 CvSVMParams 中的参数来解决此类问题. 动机 为 ...
- (转)RedHat/CentOS安装和配置kerberos
RedHat/CentOS安装和配置kerberos 需要在kerberos server和客户端都先安装ntp (Internet时间协议,保证服务器和客户机时间同步 ) 1 kerberos 服 ...