获取独立像素与物理像素比例值
// 像素和设备独立像素的一个关系
alert(window.devicePixelRatio);
获取设备物理像素比
// 以像素计,屏幕的大小
var screenWidth = window.screen.width;
var screenHeight = window.screen.height;
console.log('屏幕的宽度为: ' + screenWidth);
console.log('屏幕的高度为: ' + screenHeight);
移动设备 视图窗口
<!--对viewport的设置的meta建议写在已有的meta标签(<meta charset="UTF-8">)之后-->
<!--name="viewport":说明当前meta标签是用来设置viewport的属性的,这个属性只有在移动端才会有效-->
<!--content="":进行viewport的设置
width:设置viewport的宽度 device-width:获取当前设备的宽度
initial-scale=1:设置初始缩放比例 当我们设置width=device-width,也达到了initial-scale=1的效果,得知其实 initial-scale = ideal viewport / layout viewport 意味着,如果initial-scale设置为1,相当于设置了两个viewport的宽度一致
maximum-scale:设置最大的缩放比例
minimum-scale:设置默认状态下最小的缩放比例-->
<!--<meta name="viewport" content="width=device-width">-->
<!--<meta name="viewport" content="initial-scale=1
<!-- user-scalable:设置是否允许用户进行缩放yes/no">-->
touch说明 必循在移动端上
<script>
/*1.获取dom元素*/
var div=document.querySelector("div");
/*2.添加事件*/
/*添加开始触摸事件:当手指触摸到屏幕时触发*/
div.addEventListener("touchstart",function(){
console.log("touchstart");
});
/*添加手指滑动事件,当手指在屏幕上滑动时触发:move事件是持续触发*/
div.addEventListener("touchmove",function(){
console.log("touchmove");
});
/*添加触摸结束事件:当手指离开屏幕时触发*/
div.addEventListener("touchend",function(){
console.log("touchend");
});
/*添加触摸意外中断事件*/
div.addEventListener("touchcancel",function(){
});
</script>
开始触摸与结束触摸
<script>
var div=document.querySelector("div");
/*开始触摸*/
div.addEventListener("touchstart",function(e){
// console.log(e.touches);
/*console.log(e.changedTouches);*/
console.log(e.targetTouches[0]