js 横屏 竖屏 相关代码 与知识点
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script>
// console.dir(window)
// if ('orientationChange' in window){
// console.log('存在');
// }else{
// console.log('不存在');
// }
// console.log(document.addEventListener)
// console.log(typeof(document.addEventListener))
// console.log('')
// console.log(9? '9':'false')
// console.log(-90? '-90':false)
// console.log(0? true:'0')
// console.log('')
// console.dir(window.orientation)
// console.log(window.orientation)
// console.log(typeof(window.orientation))
// console.log('')
// console.dir(window.onorientationchange)
// console.log(window.onorientationchange)
// console.log(typeof(window.onorientationchange))
// console.log('')
// console.log(document.body.parentNode,orientation)
var fn1=(function(){
var supportOrientation = (typeof window.orientation === 'number' && typeof window.onorientationchange === 'object');
var init = function(){
var htmlNode = document.body.parentNode,orientation;//这里什么意思？ 为什么中间是 ，逗号
//还有parentNode 是获取什么的？
//它和parentELment 有什么不同之处
var updateOrientation = function(){
if(supportOrientation){//假如是移动端情况下，supportOrientation 是为 true 否则是为false的
orientation = window.orientation;
switch(orientation)
{
case 90:
case -90: orientation = 'landscape'; break;
default: orientation = 'portrait'; break;
}
}else{//不是移动端 只能通过window.innerWidth 和 window.innerEight 来判断
//移动端 一般高度都是大于 宽度的 ，
//而pc端 一般是 宽度 大于 高度的
//这里高度和宽度 指的是屏幕
//但是有些触屏笔记本 如何 确定？
orientation = (window.innerWidth > window.innerHeight) ? 'landscape' : 'portrait';
}
htmlNode.setAttribute('class',orientation);//设置 全局 class
};
if(supportOrientation){//true 是移动端
window.addEventListener('orientationchange',updateOrientation,false);//这里为什么指定的是冒泡事件？-------------------
}else{
//监听resize事件
window.addEventListener('resize',updateOrientation,false);
}
updateOrientation();//这里为什么和下面不同 这里为什么执行了(加括号)？-----------------------------------------
};
window.addEventListener('DOMContentLoaded',init,false);//牛 通过函数init 把 移动端判读相关 都一次性囊括了
});
var fun=(function(doc, win) {
//onorientationchage屏幕发生反转时触发 onresize 事件会在窗口或框架被调整大小时触发。
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {//此函数的作用是根据屏幕大小动态设置字体大小//------------------------------上面这句 逗号是什么鬼
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';//根据屏幕宽度动态设置字体大小
};
console.log(typeof(resizeEvt));
if (!doc.addEventListener) return;//这里为什么需要加上这句话啊？----------------------------
win.addEventListener(resizeEvt, recalc, false);//这里是为了 当屏幕状态发生改变时，字体大小也随之改变
doc.addEventListener('DOMContentLoaded', recalc, false);//这里是为了保证初始字体的设置
});
// fun(document,window);
如题；DOMContentLoaded和load都是页面加载的时候触发的事件。区别在于触发的时机不一样。
浏览器渲染页面DOM文档加载的步骤：
1.解析HTM L结构。
2.加载外部脚本和css文件。
3.解析并执行脚本代码。
4.DOM树构建完成。(此时会触发DOMContentLoaded事件)
5.加载外部图片等文件。
6.页面加载完毕。(此时会触发load事件)
从以上DOM文档加载步骤上可以看出；当浏览器把DOM树构建完成后就开始触发了DOMContentLoaded事件，而load事件则要等包括图片这些加载完毕才会触发。
我们监听事件的时候把优先级高的可以先监听DOMContentLoaded再监听load
orientationchange 是一个屏幕 状态事件(当屏幕从竖屏切换到横屏 或者 横屏到竖屏的时候 会被触发)
此时的event对象不包含任何有价值的信息，因为唯一相关信息可以通过window.orientation 访问到
orientation属性
它有三个值：0,90，-90
0为竖屏模式（portrait），-90意味着该设备横向旋转到右侧的横屏模式（landscape），而90表示该设备是横向旋转到左边的横屏模式（landscape）。
还有一个是180，表示竖屏但是是翻转过来的竖屏模式。但这种模式至今尚未得到支持。
语法
element.addEventListener(event,function,useCapture)
event: 事件的类型 如:click mousedown (注意：指定事件时 不要加上 on前缀)
function: 事件被触发后需要调用的函数，(被绑定的函数) 可以是匿名函数也可以是直接写入一个函数名
useCapture: 值为布尔型，描述该事件 是冒泡还是捕获，该参数是可选的.
window.addEventListener("orientationchange", function() {
var orientation =window.orientation;
// orientaion方向
switch(orientation){
case 90:
case -90:orientation='landscape';break;//横屏模式
default :orientation='portrait';break;//竖屏模式
};//这里可以根据屏幕的不同状态，来确定加载的什么样的样式class
console.log('')
if (orientation=='landscape'){
console.log('加载横屏class：landscape')
console.log(window.orientation);
}else{
console.log('加载竖屏class:portrait')
console.log(window.orientation);
}
},false);
事件冒泡或事件捕获？
事件传递有两种方式：冒泡与捕获。
事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？
在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。
在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。
addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：
addEventListener(event, function, useCapture);
默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。
Problem 1:这两种方式区别在哪里？
document.getElementById('id').addEventListener('click',function(){console.log('比较两则之间的区别')},false)
document.getElementById('id').onclick=function(){console.log('两则之间的区别在哪里？');}
removeEventListener()方法
removeEventListener()方法移除由addEventListener()方法添加的事件句柄：
element.removeEventListener("mousemove",function);
浏览器兼容处理
let btnObj= document.getElementById('id');
if(btnObj.addEventListener){ //所有主流浏览器,除了ie 8 及更早版本
btnObj.addEventListener('click',function);
}else if(btnObj.attachEvent){ //IE 8 以及更早版本
btnObj.attachEvent('onclick',function);
}
IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是，对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:
element.attachEvent(event, function);
element.detachEvent(event, function);
// console.log(document.docuemntElement)
// console.log(typeof(document.documentElement))
// console.dir(document.documentElement)
// console.dir(document.documentElement.clientWidth)
// console.dir(document.documentElement.clientHeight)
// console.log(window.orientation)
// fun(document,window);
// (document, window)
/**
*document.documentElement:返回html dom中的root 节点 即<html>
*document.documentElement.clientWidth：获取浏览器窗口文档显示区域的宽度，不包括滚动条。
*document.documentElement.clientHeight:获取浏览器窗口文档显示区域的高度，不包括滚动条
*/
<div id="test" style=" background: #ccc"></div>
<script type="text/javascript">
autodivheight();
function autodivheight(){ //函数：获取尺寸
//获取浏览器窗口高度
var winHeight=0;
if (window.innerHeight){
winHeight = window.innerHeight;
}
else if ((document.body) && (document.body.clientHeight)){
winHeight = document.body.clientHeight;
}
//通过深入Document内部对body进行检测，获取浏览器窗口高度
if (document.documentElement && document.documentElement.clientHeight){
winHeight = document.documentElement.clientHeight;
}
//DIV高度为浏览器窗口的高度
//document.getElementById("test").style.height= winHeight +"px";
//DIV高度为浏览器窗口高度的一半
document.getElementById("test").style.height= winHeight/2 +"px";
}
window.onresize=autodivheight; //浏览器窗口发生变化时同时变化DIV高度
// onresize 事件会在窗口或框架被调整大小时发生。
// innerheight 返回窗口的文档显示区的高度。
// innerwidth 返回窗口的文档显示区的宽度。
//document.body.clientHeight是指页面body元素的的高度,
//但是body里面包含img元素时，实际高度 可能会偏小，
//因为图片下载需要时间，假如图片加载没有完成，偏小的那部分就是图片那部分
</script>
</script>
</body>
</html>
横屏 竖屏 相关代码 与知识点
js 横屏 竖屏 相关代码 与知识点的更多相关文章
- HTML5中判断横屏竖屏
在移动端中我们经常碰到横屏竖屏的问题,那么我们应该如何去判断或者针对横屏.竖屏来写不同的代码呢. 这里有两种方法: 一:CSS判断横屏竖屏 写在同一个CSS中 1 2 3 4 5 6 @media s ...
- 手机横屏竖屏css
@media是css3中新定义的,功能非常强大,顾名思义PC是无法匹配横竖屏的,所以orientation只对移动设备起效. 1.头部声明 复制代码 代码如下: <meta name=" ...
- vue手机端横屏竖屏切换
1.建一个空白的vue文件,添加上如下代码 data() { this.$router.go(-1) return {} } 2.在需要横屏竖屏切换的页面中加入如下代码: beforeMount( ...
- RK3288 6.0 双屏异显，横屏+竖屏【转】
本文转载自:http://blog.csdn.net/clx44551/article/details/78215730?locationNum=8&fps=1 RK3288 6.0 双屏异显 ...
- javascript判断手机旋转横屏竖屏
javascript判断手机旋转横屏竖屏 // 横屏竖屏函数 function orientationChange(){ switch(window.orientation) { case 0: // ...
- Android横屏竖屏切换的问题
Android横屏竖屏切换的问题 http://blog.sina.com.cn/s/blog_77c632410101790w.html
- 【转】Android 模拟器横屏竖屏切换设置
http://blog.csdn.net/zanfeng/article/details/18355305# Android 模拟器横屏竖屏切换设置时间:2012-07-04 来源:设计与开发 ...
- Android之横屏竖屏显示问题
1.採用不同的布局文件 在res下创建目录layout-land 在该目录下写入的layout(xml文件)横屏的时候系统自己主动选择显示的layout 同理: 在res下创建目录layout-por ...
- Python--将文件夹中图片按照横屏竖屏进行分类
搬运链接:https://www.jianshu.com/p/c8be54282e77 """ 可以遍历输入的路径的指定后缀的文件,主要是用来筛选图片,将图片分成 横屏, ...
随机推荐
- ie11 调试工具不能使用
使用ie11仿真ie8测试兼容性的时候,方便调试 dom和仿真都不能用 搜索 https://www.ludou.org/win7-ie-11-f12-bug.html也有相关问题 安装补丁 64位的 ...
- JAVA面试中的陷阱
第一,谈谈final, finally, finalize的区别.最常被问到. 第二,Anonymous Inner Class (匿名内部类) 是否可以extends(继承)其它类,是否可以impl ...
- C++学习二继承
转载自https://www.cnblogs.com/33debug/p/6666939.html 1.继承与派生 继承是使代码可以复用的重要手段,也是面向对象程序设计的核心思想之一.简单的说,继承 ...
- 代码规范【经理培训内容记录】[有参考：http://kb.cnblogs.com/page/179593/]
一.命名规范 方法:所有首字母大写,如BloodControl; 类:所有首字母大写: 变量:第一个首字母小写,其他首字母大写:如bloodControl; 常量:全部字母大写,可用下划线分隔:如BL ...
- poj2480-Longge's problem-(欧拉函数)
Longge is good at mathematics and he likes to think about hard mathematical problems which will be s ...
- Halcon常用算子01
F1:Help F2:重置 F3:激活一行程序 F4:注销一行程序 F5:执行到stop()或程序结尾 F6:步执行(一步步调试) F10:添加或撤销断点 dev_open_window:打开图像窗口 ...
- jenkins commande not found
解决方法: http://www.geekcome.com/content-10-3868-1.html 1.控制台执行 echo $PATH 把输出的这句话复制 2.jenkins->系统管理 ...
- package.json bin
[package.json bin] 1.bin field in your package.json which is a map of command name to local file nam ...
- SQLMAP自动注入（二）
--data 添加post头 --data 添加get头 --cookie 添加cookie 设置探测级别大于等于2时会探测cookie是否有注入点 --random-agent 随机生成user-a ...
- JMeter一次简单的接口测试（转载）
转载自 http://www.cnblogs.com/yangxia-test 本次接口测试:根据ws查询所有商品的具体的信息.检查商品是否返回成功. 1. 准备测试数据 查询数据库中产品表已上架商 ...