![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
移动端
移动的视口理论,像素概念,适配
无悟饭空
一个立志要从事十年的迷路码农
展开
-
移动端的TouchEvent对象
在移动端我们可以有多个手指去操作,所以会有多个对象;changedTouches- 触发当前事件的手指列表- 该列表包含了我们常用的clientXheclientY的必要信息;targetTouches- 触发当前事件元素上的手指列表touches- 触发当前事件时,屏幕上的手指列表;...原创 2020-03-14 15:59:02 · 174 阅读 · 0 评论 -
移动端a标签跳转方案
a标签在促发touchend事件时,a标签就会跳转;touchmove最终也会触发touchend,所以会导致误触;代码显示// 全面禁止移动端事件的默认行为document.addEventListener('touchstart',function(ev){ ev = ev || event; ev.preventDefault();})// 获取页面中所有的a标签var...原创 2020-03-14 15:50:05 · 831 阅读 · 0 评论 -
移动端事件点透
pc端的事件可以在移动端触发pc端事件有300毫秒延迟移动端事件不会有延迟html代码<body><div id="item"></div><a href="http://www.baidu.com">Baidu</a></body>css代码#item{ // 让item绝对定位,脱离文档流在a标签...原创 2020-03-14 15:38:11 · 155 阅读 · 0 评论 -
全面禁止移动端事件的默认行为和单独开启元素的默认事件;
event.preventDefault();该方法可以取消元素上event.cancelable属性为true的默认事件。在移动端所有的event.cancelable属性为true;所有我们可以用event.preventDefault()来全面禁止事件的默认行为代码显示:// 给document上的所有的某一个事件添加DOM2的事件监听document.addEventLis...原创 2020-03-14 14:44:40 · 474 阅读 · 0 评论 -
移动端实现1物理像素
rem适配 下的1物理像素实现(function(){ var dpr = window.devicePixelRatio||1; var styleNode = document.creatElement('style'); var w = document.documentElement.clientWidth*dpr/16 ; styleNode.innerHtml = 'ht...原创 2020-03-14 14:26:33 · 84 阅读 · 0 评论 -
rem适配
什么是em和rem?1em=1倍的自身fontsize;1rem=1倍的html(根标签)的fontsize;适配的作用适配是为了实现在不同页面上实现等比;如何设置一个div的width在不同设备上实现满屏?我们设置html的fontsize为布局视口的宽度html.style.fontSize = document.documentElement.clientWidth + 'px...原创 2020-03-14 14:01:05 · 222 阅读 · 0 评论 -
viewpoint适配
适配的作用将所有设备的布局视口的宽度调整为设计图的宽度;viewport适配的原理在viewport适配方案中,每一个元素的不同设备上占据的css像素的个数是一样的。但是css像素和物理像素的比例是不一样的。viewport适配的优缺点优点:所量即所得;缺点:没有完美视口;viewport适配代码解析html代码<!-- viewport适配时,页面中先预留viewport...原创 2020-03-14 14:00:46 · 722 阅读 · 0 评论 -
viewport的meta标签
我们都是知道用户是可以对页面进行页面缩放的。但是pc端的用户缩放和移动端的缩放浏览器是有差异的。pc端:用户缩放影响的布局视口的尺寸,会影响布局。移动端:用户缩放影响的视觉视口的尺寸。(页面布局不会乱)initial-scale初始化缩放,也叫系统缩放。系统缩放是参照与理想视口(独立设备像素)进行缩放,同时控制布局视口和视觉视口。当设置initial-scale=1时,等同于widt...原创 2020-03-10 19:13:11 · 161 阅读 · 0 评论 -
布局视口、视觉视口、理想视口
布局视口在移动端,浏览器厂商面临着一个比较大的问题,他们如何将数以万计甚至可以说是数以亿计的pc端网页完整的呈现在移动端设备上,并且不会出现滚动条。这个时候,视口的宽度还是和浏览器窗口的宽度一致。我们都知道pc端的页面一般都为960px或者1024px。那么要完整的放下它们,我们移动端浏览器必须要有个容器放下它,而且只有有了这个容器我们才能规定移动端的浏览器到底能放下多大的页面。这个容器我...原创 2020-03-10 17:59:08 · 1635 阅读 · 0 评论 -
屏幕尺寸、屏幕分辨率、高清屏、屏幕像素密度
屏幕尺寸指屏幕的对角线的长度,单位是英寸,1英寸=2.54里面。屏幕分辨率指在横纵向上的像素点数,单位是px,1px=1像素点。一般以纵向*横向像素来表示一个手机的分辨率。如:1960*1080(这里的1像素指的是物理设备的1个像素点)屏幕像素密度屏幕上每英寸可以显示的像素点的数量,单位是ppi,即“pixels per inch”的缩写;屏幕像素密度跟屏幕分辨率和屏幕尺寸有关;...原创 2020-03-09 12:39:34 · 1775 阅读 · 0 评论 -
物理像素、css像素、位图像素、设备独立像素、像素比
物理像素也叫设备像素。物理像素是设备成像的最小单位。我们买手机的时候会有一个n*m的分辨率,那是屏幕的n*m个呈像的点。一个点(小方格)为一个物理像素。它是屏幕能显示的最小粒度。注意: 任何设备的物理像素的数量是固定的,任何一款设备上1物理像素的大小是不会改变的。 不同设备上1物理像素的大小可能是不一样的。css像素它是一个抽象的单位,主要使用在浏览器上,用来精确的度量web页...原创 2020-03-09 13:31:43 · 556 阅读 · 0 评论