移动端的概念

这篇具有很好参考价值的文章主要介绍了移动端的概念。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

【移动端】

1. 什么是移动端

大前端时代:

  1. ​ 前端开发涉及的领域越来越多,如:PC端,移动端,小程序,App,甚至是物联网
  2. ​ 大前端’的大字体现在地位重要,涉及领域众多
  3. ​ 前后端完全分离

移动端开发:

  1. ​ PC端:指电脑端,使用电脑访问的页面
  2. ​ 移动端:手机访问
    1. 比如:使用手机浏览器访问淘宝,京东等网页版
    2. 手机网页版,App 应用,小程序等统称为移动端开发
  3. 目前主流开发: 移动端

2. 屏幕相关概念

2.1 屏幕大小

  • 屏幕大小是指屏幕的对角线长度,单位一般是英寸(inch)。

  • 常见的手机屏幕大小有: 3.5寸、4寸、4.7寸、5.0寸、5.5寸、6.0寸等等

  • 英寸与厘米的换算关系为 :1英寸(inch) = 2.54厘米(cm)

    移动端的概念,移动端、小程序,前端

2.2 屏幕分辨率

概念:

  1. 屏幕分辨率是指屏幕在:横向、纵向上所拥有的 ‘物理像素点’总数。一般表示用 n * m 表示。
  2. 设备能控制显示的最小单元,可以把物理像素看成是对应的像素点
  3. 例如: IPhone 6 的屏幕分辨率为 750 * 1334

注意事项:

  1. 屏幕分辨率是一个固定值,屏幕生产出来就确定了,无法修改!
  2. 屏幕分辨率、显示分辨率是两个概念,电脑或手机的设置中可以修改的是:显示分辨率。
  3. 显示分辨率指的是设备当前所用到的物理像素点数,或者说:屏幕分辨率 >= 显示分辨率。

2.3 常见手机分辨率

移动端的概念,移动端、小程序,前端

3. 像素相关概念

3.1 物理像素

概念:

  • 屏幕的分辨率
  • 设备能控制显示的最小单元,可以把物理像素看成是对应的像素点

特点

  • 由屏幕制造商决定,屏幕生产后无法修改

  • 物理像素点个数越多,图像越清晰,但人类肉眼识别是有极限的,当到了极限之后就无法分辨

  • 常用:iphone6物理像素: 750 ***** 1334

作用:

  • 决定控制屏幕显示的像素点个数,屏幕分辨率的大小

理解:

  • 可以认为是屏幕上的发光点

  • 演唱会上组成大的LED*屏幕上的一块一块的小屏幕,由小的发光晶体管组成

    移动端的概念,移动端、小程序,前端

3.2 css像素

概念:

  • css像素又名: 逻辑像素,css像素是一个抽象的长度单位,单位是px
  • 编写css、JS中所使用的
  • 都是css像素(可以理解为:“程序员像素”)

特点:

  • 虚拟像素
  • 无法像长度单位一样直接衡量,最终需要转换为物理像素进行量化

作用:

  • 开发者进行样式编写的单位,最终由设备转换为物理像素量化在页面上

请思考:

  • 代码中所写的1px(css像素 ),到了屏幕上到底对应几个物理像素呢?
  • 是1个css像素就对应1个物理像素(“发光的灯泡”)吗?

转换介质:设备独立像素

3.3 设备独立像素

概念:

  • 设备独立像素简称 DIP 或 DP(device-independent pixel)
  • 又称:屏幕密度无关像素。
  • 理解:我们的电脑、手机设备中有一个坐标系,这个坐标系中的一个点,就是一个设备独立像素,对应一个可以由程序去使用的虚拟像素(css像素)。程序根据屏幕特性、将设备独立像素上的点对应到屏幕上的物理像素点。

特点:

  • 虚拟像素,设备厂商根据屏幕特性设置的,无法更改
  • 可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用并控制的虚拟像素
  • 1css像素 = 1设备独立像素,利用设备独立像素描述移动端设备尺寸的时候,单位也是px,比如iphone6的尺寸(设备独立像素)是 375 * 667

作用:

  • 最终转换为物理像素进行量化
  • 设备独立像素的出现,使得即使在高清屏下,(例如苹果的Retina屏),也可以让元素有正常的尺寸,让代码不受到设备的影响

历史:

  • 在没出现【高清屏】的年代,1个css像素对应1个物理像素,但自从【高清屏】问世,二者就不再是1对1的关系了。苹果公司在2010年推出了一种新的显示标准:在屏幕尺寸不变的前提下,把更多的物理像素点压缩至一块屏幕里,这样分辨率就会更高,显示效果就会更佳细腻。苹果将这种屏幕称为:’Retina 屏幕(又名:视网膜屏幕)’,与此同时推出了配备这种屏幕的划时代数码产品——iPhone4

视网膜屏幕:

  • 起名视网膜屏幕,指人类肉眼可识别的最大分辨率屏幕
  • Dpr(devicePixelRatio)为 2

3.4 三者像素关系

设备独立像素与css像素

  • 在无缩放的情况下(标准情况):1css像素 = 1设备独立像素
  • 移动端目前大都是不使用缩放情况

设备独立像素与物理像素关系

  • 普通屏幕下 1 个设备独立像素 对应 1 个物理像素
  • 高清屏幕下 1 个设备独立像素 对应 N 个物理像素

3.5 设备像素比(dpr)

概念:

  • 单一方向上设备【物理像素】和【设备独立像素】的比例。即:dpr = 物理像素 / 设备独立像素

获取

  • Window.devicePixelRatio

常见设备像素比:

移动端的概念,移动端、小程序,前端

像素之间关系

  • 普通屏(dpr = 1):1css像素 = 1设备独立像素 = 1物理像素
  • 高清屏(dpr = 2):1css像素 = 1设备独立像素 = 2物理像素
  • 高清屏(dpr = 3):1css像素 = 1设备独立像素 = 3物理像素

示例:程序员写了一个width为300px的盒子,那么

  • 它占据了300个css像素;
  • 若用户不进行缩放,则对应300个设备独立像素;
  • 在dpr为2的设备上,这300个css像素占据了300*2=600个物理像素(横向)

总结:以iphone6为例(横向)

  • 物理像素:750px
  • 设备独立像素:375px
  • css像素:375px

4. 视口viewport

4.1 视口分类

  1. PC端视口
  2. 移动端视口
    1. 布局视口
    2. 视觉视口
    3. 理想视口(完美视口)

4.2 PC端视口

概念:

  • pc端视口的默认宽度和浏览器窗口的宽度一致;
  • 在 css 标准文档中,视口也被称为:初始包含块;
  • 它是所有 css 百分比宽度推算的根源;

获取方法:

  • 获取浏览器窗口文档显示区域的宽度,不包含滚动条
    • document.documentElement.clientWidth
  • 包含滚动条可视区域
    • window.innerWidth
  • 包含滚动条、边框的可视区域
    • window.outerWidth
  • 设备整个屏幕的宽度,与浏览器无关
    • screen.width

4.3 移动端视口

4.3.1 布局视口

概念:

  • Css布局时的画布,用于约束页面内容显示的范围
  • 可以理解为我们画画时候的画板大小,用于约束绘画者绘画的范围

大小:

​ 默认980px

作用

  • 用于解决早期的页面在手机上显示的PC问题

    移动端的概念,移动端、小程序,前端

4.3.2 视觉视口

概念:

  • 视觉视口就是用户可见的区域,它的绝对宽度永远和设备屏幕一样宽

作用

  • 用于解决单一使用布局视口压缩页面出现的问题;
  • 比如:压缩后页面内容太小,用户无法精准点击甚至是无法查看清楚页面内容

移动端的概念,移动端、小程序,前端

4.3.3 理想视口

概念:

  • 当页面在浏览器中呈现最佳效果即为理想视口
  • 布局视口宽度 = 视觉视口宽度 = 设备宽度

作用

  • 用于使页面完美呈现在浏览器中

  • 解决单一压缩页面在手机浏览器中带来的问题

    移动端的概念,移动端、小程序,前端

4.3.4 理想视口实现
<meta name="viewport" content="width=device-width,initial-scale=1.0" />

扩展内容: viewport选项

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

  • width: 布局视口宽度
  • initial-scale: 初始缩放比例
  • maximum-scale: 最大缩放比例
  • minimum-scale: 最小缩放比例
  • user-scalable: 是否允许用户缩放,

问题延伸:

实现理想视口以后,虽然没有滚动条和页面压缩现象了,但是移动端设备的型号很多,屏幕大小不一致,那么不同移动端设备下,页面内的元素大小如何显示?大小固定? || 根据屏幕大小不同元素也随之变化?

解决问题:

适配

5. 适配

请思考:

为什么要做适配

场景:

  • 实际开发中上线后的移动端项目需要在不同的手机上供用户使用访问,不同的手机屏幕尺寸大小不一样
  • 那么在开发中需要单独为每一中手机单独开发页面吗?

5.1 适配方案

  1. viewport适配
  2. rem适配
  3. vw适配

5.2 viewport适配

  • 适配方案:

    • 通过meta标签进行viewport设置达到适配效果
    • 主要是调整布局视口大小
    • 拿到设计稿之后,设置布局视口宽度为设计稿宽度,然后直接按照设计稿给宽高进行布局即可
  • 优点:

    • 开发页面的时候直接按照设计稿的尺寸进行编写即可
  • 缺点

    • 有些不希望被适配的东西,例如边框,也被适配了,导致比设计稿大的设备上边框太粗
    • 图片失真,内容显示不清

    viewport 适配的思路:

    在进入页面,要渲染这个页面,渲染的时候从上到下执行代码,先执行一段js代码,获取设备的宽度

    然后立即用js去设置一个meta标签,这个meta标签的width设置为当前设备的宽度

5.3 px, em, rem的区别

  • px:
    • 绝对单位,一旦设置,就无法因为适应页面大小而改变
  • em:
    • 相对单位,em是相对于其父元素来设置字体大小的,一般都是以的“font-size”为基准
    • 子元素字体大小的em是相对于父元素字体大小
    • 元素的width/height/padding/margin用em的话是相对于该元素的font-size
  • rem:
    • 相对单位,rem是相对于根节点字体大小
    • 一旦设置根标签字体大小,body标签必须设置字体大小,否则会继承根标签字体大小

5.4 rem适配

5.4.1 方案一:

使用rem 适配的时候,需要设置body字体大小,否则会影响em值的大小

  • 适配细节:
    • 将根节点字体设置为100px
    • 1rem = 100px
    • 编写的值rem(设备元素尺寸) = (设计稿元素尺寸 / 设计稿宽度 * 设备宽度) / 100 rem
    • 比如:iphone6手机下,设计稿750, 设计稿元素宽高为375的div,设置宽高应该是: (375/750 * 375)/100 = 1.875 rem
  • 优点:
    • 方案统一,完美适配
  • 缺点:
    • 计算相对复杂
  • 注意点:
    • 使用rem 适配的时候,需要设置body字体大小,否则会影响em值的大小
5.4.2 方案二:
  • 适配细节:

    • 将页面设备宽度或 设计稿宽度均等分10份
    • 方式一:设备等分: 1rem = 1/10设备宽度
      设备等分: 1rem = 1/10设备宽度代码:
    <script>
       function remRefresh() {
          let clientWidth = document.documentElement.clientWidth;
          // 将屏幕等分10份
          let rem = clientWidth / 10;
          document.documentElement.style.fontSize = rem + 'px'; // 设置html元素的字体大小,让rem单位生效
          document.body.style.fontSize = '12px'; // 设置body的字体,重置一下字体
        }
    
        window.addEventListener('pageshow', () => {
          remRefresh()
        })
        // 函数防抖
        let timeoutId;
        window.addEventListener('resize', () => {
          timeoutId && clearTimeout(timeoutId);
          timeoutId = setTimeout(() => {
            remRefresh()
          }, 300)
        }) 
        </script>
    
    • 方式二:设计稿等分: 1rem = 1 /10 设计稿宽度
    • 设计稿的值直接换算成rem计算 编写的值 rem = 设计稿元素尺寸/设计稿等分10份的值
    • 比如:iphone6手机下,设计稿750, 设计稿元素宽高为375的div,设置宽高应该是: 375/(750/10)= 5rem
  • 优点:

    • 换算简单,完美适配,推荐使用
    • 可搭配第三方库自动换算:lib-flexible 、 postcss-plugin-px2rem
  • 注意点:

    • 使用rem 适配的时候,需要设置body字体大小,否则会影响em值的大小

5.5 vw适配

  • 概念:视口单位vw,vh
    • 1vw = 1%屏幕宽度
    • 1vh = 1%屏幕高度
  • 适配细节:
    • 需要将设计稿等分100份
    • 计算设计稿元素占比多少份
    • 比如:750设计稿上375的元素, 375 / 750 /100 = ?vw
  • 注意点:
    • 只能使用vw适配,不能使用vh
    • 有的机型可能宽度一样,但高度不一样,比如:iphone6和iphoneX
  • 缺点:
    • 换算复杂

6. 移动端事件

6.1 事件分类

  • touchstart 元素上触摸开始时触发
  • touchmove 元素上触摸移动时触发
  • touchend 手指从元素上离开时触发
  • touchcancel 触摸被打断时触发,很少使用

6.2 事件绑定方式

nodeEle.ontouchstart = function(e){
	console.log('touch start',e)
}
nodeEle.addEventListener('touchstart', function(e){
	console.log('touch start',e)
})

6.3 事件点透

6.3.1 click事件在移动端延迟
  • 互联网刚兴起的时候,更多是使用PC 的网页,即使在手机上,通常需要使用手指进行缩放来查看页面内容,如何缩放呢?双击放大。、。。
  • 浏览器为了区分用户到底是点击还是双击缩放,需要等待,等待得时长大概是300ms,此时用的事件是click事件
  • touchstart: 手指一旦触摸屏幕就触发,不需要等待,因此,click事件会有时间差
  • 如果设置meta view标签,延迟时间大概是100ms左右
6.3.2 事件点透现象
  • 原因: 在移动端touchstart事件结束后会默认触发元素的click事件
  • 场景: 如果touch事件隐藏一个遮罩的话,touchstart作用在遮罩后会自动触发click事件,该click事件自动作用在遮罩后方的元素的身上

 <style>
    * {
      margin: 0;
      padding: 0;
    }

    a {
      display: block;
      height: 100vh;
      width: 100vm;
      text-align: center;
      line-height: 80vh;
    }

    #mask {
      position: fixed;
      left: 0;
      top: 0;
      background-color: rgba(0, 0, 0, 0.2);
      width: 100vw;
      height: 100vh;
      text-align: center;
      line-height: 100vh;
     
    }

    .btn {
      width: 200px;
      height: 40px;
      background-color: yellowgreen;
      color: #fff;
      border: none;
      outline: none;
    }
  </style>
<a href="http://www.atguigu.com">点击去尚硅谷</a>
<div id="mask">
  <button class="btn">点我关闭遮罩</button>
</div>
let btn = document.querySelector('.btn');
let mask = document.querySelector('#mask');
btn.addEventListener('touchstart', function(){
  mask.style.display = 'none';
})
6.3.3 事件点透解决方案
  • 方案一:

    • 阻止默认行为
    btn.addEventListener('touchstart', (e) => {
        e.preventDefault()
        mask.style.display = 'none'
    })
    
  • 方案二:

    • 使用click事件代替touch事件
    btn.addEventListener('click', () => {
       mask.style.display = 'none'
    })
    
  • 方案三:

    • 让隐藏的目标元素延迟隐藏,延迟时间大于300ms
    btn.addEventListener('touchstart', (e) => {
        setTimeout(() => {
        	mask.style.display = 'none'
        }, 300)
    })
    

7. 移动端经典问题

7.1 问题: 1px像素边框过粗**

  • 场景重现:

    设计稿: 宽度750, 设计稿中有个box的div width 375px height 375px

    UI设计师:我需要你将这个box的div的边框设置成1个像素,颜色为红色

    前端开发工程师: 好的

    ​ 代码实现: div: border: 1px solid red

    UI设计师: 你的效果不对,我要的是1个像素,你设计的边框错粗,大于1个像素

  • 问题:

    前端工程师代码明明写的是1px的border,UI工程师为什么说边框比1个像素粗呢

  • 原因:

    • UI工程师需要的是1个物理像素的边框,即在设计稿上占比是1个像素,设计稿总宽是750
    • 前端工程师编写的是1px, 比如在iphone6下,因为dpr = 2, 所以1px在同一个方向上 = 2个物理像素
    • 因此边框比1物理像素要粗

7.2 解决方案

多媒体查询器,根据dpr不同,对border进行对应的缩放文章来源地址https://www.toymoban.com/news/detail-686035.html

* {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 5rem; 
      height: 5rem;
      font-size: 16px;
      border: 1px solid red;
    }

    /* 多媒体查询器 */
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
      .box {
        border: 0.5px solid red;
      }
    }

    @media screen and (-webkit-min-device-pixel-ratio: 3) {
      .box {
        border: 0.333333px solid red;
      }
    }

到了这里,关于移动端的概念的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp实现移动端的视频图片轮播组件

    1、视频轮播组件app体验地址 https://tt.appc02.com/nesxr6 2、支持小程序、H5、APP,在小程序上运行的效果图 3、使用方法 第一步,按照截图步骤配置好 第二步:参考以下代码,使用视频图片轮播组件 3、组件属性说明 ad-list 广告的数据。数组形式,每个item需要包含url、isVideo字段,

    2024年02月10日
    浏览(35)
  • vue - vue简单实现移动端的table表格

    vue实现移动端的table表格,效果图如下: 主要实现功能: 1,表头字段可以进行正序倒序排序功能; 2,可以展开收起; 3,蓝色这一行是合计数据 需要单独出来进行渲染,否则排序的时候此行会排乱掉; 用到的模拟数据会放到最后面; 4,注意表头数据thList,title是标题,

    2024年02月16日
    浏览(43)
  • 【产品经理】移动手机区别于PC端的10点特性

    众所周知,当今时代已经是移动互联网时代。相比以前大家热衷于在电脑上浏览网页、玩游戏的情形,现在大家都喜欢通过移动手机去满足个人方方面面的需求,无论是购物、吃饭、求职、阅读、聊天、游戏等等。也就是说,在日常的生活中,移动已经成为主流,甚至变成了

    2024年02月15日
    浏览(40)
  • 在设计web页面时,为移动端设计一套页面,PC端设计一套页面,并且能自动根据设备类型来选择是用移动端的页面还是PC端的页面。

    响应式设计,即移动端和PC端共用一个HTML模式,网站的程序和模板自动根据设备类型和屏幕大小进行自适应调整。这种方法我不喜欢,原因是不能很好保证各种客户端的效果,里面存在各种复杂的兼容性等问题。 我喜欢为不同的客户端写不同的模式,避免在响应式设计中可能

    2024年02月09日
    浏览(60)
  • 如何将储存在Mac或PC端的PDF文件传输到移动设备呢?

    iMazing是一款iOS设备管理软件,用户借助它可以将iPad或iPhone上的文件备份到PC或Mac上,还能实现不同设备之间的文件传输,能很大程度上方便用户进行文件管理。 在阅读方面,iPad和iPhone是阅读PDF的优秀选择,相较于Mac或PC,它们更加便携,方便随时阅读。那么,如何将储存在

    2024年02月10日
    浏览(50)
  • YOLOv5、YOLOv8改进:MobileViT:轻量通用且适合移动端的视觉Transformer

    MobileViT: Light-weight, General-purpose, and Mobile-friendly Vision Transformer 论文:https://arxiv.org/abs/2110.02178 MobileviT是一个用于移动设备的轻量级通用可视化Transformer,据作者介绍,这是第一次基于轻量级CNN网络性能的轻量级ViT工作,性能SOTA!。性能优于MobileNetV3、CrossviT等网络。 轻量级卷积

    2024年02月13日
    浏览(43)
  • YOLOv5改进 | 主干篇 | 华为GhostnetV1一种移动端的专用特征提取网络

    本文给大家带来的改进机制是华为移动端模型 Ghostnetv1 ,华为GhostnetV1一种移动端的专用特征提取网络,旨在在计算资源有限的嵌入式设备上实现高性能的图像分类。 GhostNet的关键思想 在于通过引入Ghost模块,以较低的计算成本增加了特征图的数量,从而提高了模型的性能。这

    2024年01月21日
    浏览(51)
  • 前端和后端的区别

    有的人认为,前端很好学,后端不好学。 也有的人认为,前端不好学,后端好学,归根到底还得看个人兴趣。 前端和后端做简单的叙述 后端:入门难,深入更难,枯燥乏味,没有太大成就感,看一堆业务逻辑代码。 前端:入门简单,先易后难,能看到自己做出来的展示界面

    2024年02月10日
    浏览(30)
  • element-ui的el-select在ios移动端的兼容性适配

    今天的我在做一个 h5 的项目,发现 element-plus (我使用的版本是 2.2.19 )里的 el-select 在 ios 上需要点击2次才能打开下拉框。经过很久的研究和查阅无数资料(包括百度、谷歌搜索到的),都没有解决这个问题。最后我探究里面的根本原因,最后才自己找到解决方案, 可以仔

    2024年01月18日
    浏览(51)
  • Tensorflow无人车使用移动端的SSD(单发多框检测)来识别物体及Graph的认识

    环境是树莓派3B+,当然这里安装 tensorflow 并不是一定要在树莓派环境,只需要是 ARM架构 就行,也就是目前市场上绝大部分的嵌入式系统都是用这套精简指令集。 在电脑端的检测,有兴趣的可以查阅SSD(Single Shot MultiBox Detector)系列:计算机视觉之SSD改进版本(平滑L1范数损失与焦

    2024年02月15日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包