移动端的开发详解与1px边框等注意事项
移动端开发
我们现在关注的点还在移动M站上,或者我们可以叫做webapp,其实就是运行在移动端浏览器中的web网站。
app:application应用程序。
手机软件:主要指安装在智能手机上的软件,完善原始系统的不足与个性化。
移动端开发是与PC端肯定是有很大不同的,所以我们需要学习如何在移动设备上开发完美适配的app
开发移动端应用我们需要学习的知识点可以分成如下几个:
移动端布局适配
移动端事件
移动端交互效果
移动端前端框架
移动端调试
移动端布局适配
从屏幕尺寸、屏幕类型等方面来看的话,移动设备和PC设备大有不同,所以从布局、适配等方面都需要我们考虑到
Viewport视口的作用 (在移动端浏览器上面用来显示网页的那一块区域)
在很久以前,我们的设备还不是智能设备的时候,设备访问智能访问到网页的左上角(当时都是pc网站),查看全部内容需要通过滚动条
慢慢的我们发现,我们的一个页面放到移动端中访问的时候,没有滚动条了,但是内容都缩小了
这是因为我们有了一个叫做viewport的一个东西
网页不是直接放入浏览器中的,而是先放入到viewport中,然后viewport在等比缩放到浏览器的宽度,放入浏览器,viewport在缩放的过程中,网页内容也被缩小了
网页访问到的clientWidth其实是viewport的宽度
这样的话我们需要做一些处理,其实问题的根源在于viewport的宽度和浏览器宽度不一样,如果我们能将其设置为一样的话,不会出现这样的问题了
我们可以通过meta标签来设置viewport将其设置为浏览器的宽度,也就是设备的宽度,这样的话布局就会简单多了
viewport的宽度
当浏览器宽度小于980的时候,宽度就是980,当浏览器尺寸宽度大于980的时候,宽度和浏览器宽度一致
通过meta标签来设置viewport
标签提供关于 HTML 文档的元数据。它不会显示在页面上,但是对于机器是可读的。可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。
meta标签大全
meta viewport 的6个属性:
width | 设置layout viewport 的宽度,为一个正整数,或字符串"width-device" |
---|---|
initial-scale | 设置页面的初始缩放值,为一个数字,可以带小数 |
minimum-scale | 设置页面的最小缩放值,为一个数字,可以带小数 |
maximum-scale | 允许用户的最大缩放值,为一个数字,可以带小数 |
height | 设置layout viewport 的高度,这个属性并不重要,很少使用 |
user-scalable | 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许 |
移动端布局方式与设计图
现有的布局方式:
固定布局,每一个元素都是固定的尺寸,内容区域居中在浏览器中间
内容区域的尺寸:980,1000,1100,1200
响应式布局,利用媒体查询来实现不同尺寸的浏览器显示结构不一样 @media 根据浏览器分辨率大小进行适配
一般会有三张设计图,PC,平板,手机
自适应布局,属于响应式里的一种,利用rem、百分比、vwvh等布局单位来实现
设计图一般只有一张,640、750居多
移动端布局
移动的屏幕和PC的屏幕有一个很大的区别,移动端是视网膜高清屏(Retina)
retina屏幕有一个属性叫DPR(设备像素缩放比) = 物理像素/逻辑像素
例如,iphone 6手机商宣传手机的尺寸是:750宽,这个值就是物理像素,而从开发者眼里我们所指的其实是375px(逻辑像素)
在dpr为2的手机中,我们的一个逻辑像素会从横纵两个方向分别以2个像素点来渲染
如果不管dpr的话,其实我们布局依然可以,因为我们设置一个像素宽高的东西的话,在手机上看见的基本也就是这么大,至于手机设备用多少个物理像素去渲染,大小还是不会变化的
设计师出图都是2倍的,是因为,在页面中除了字体(矢量图)大部分都是位图,也就是如果一个像素宽高的盒子里准备放入图片,如果图片的尺寸也是一个像素宽高的话,因为其实在移动端渲染的时候是用四个像素来渲染,图片会失真,但是如果我们给一像素宽高的盒子放入2像素宽高的图片的话,就不会失真
布局单位
因为我们的移动设备有很多种,所以我们的布局不可能是固定布局,所以我们要使用自适应布局
我们在开发中可以选用很多自适应布局单位,这些单位必须满足一个条件
%
优点:简单,无需设置,兼容性好
缺点:基于父元素的属性来设置,如果父元素没有宽高,设置无效vwvh
一个vw等于viewport宽度的百分之一,一个vh等于viewport高度的百分之一
vmax等于vw和vh中较大的那个 vmin等于vw和vh中较小的那个优点:简单,无需设置
缺点:兼容性不好rem
一个rem等于根元素(html)的字体大小,兼容性很好
优点:兼容好,使用简单
缺点:需要设置
rem与适配
当我们想使用一个自适应单位的时候,发现%有缺陷,vwvh兼容性差,弹性盒所针对的是元素排列的问题,只适用于某种情况,所以我们就想,能给我一个没啥上面的缺陷的单位,想到了rem
rem的兼容性好一点,它也确实是一个布局单位,不受父子元素的影响,设置了rem之后,也不会对px、em等单位造成影响,它是一个理想的单位
rem也有一个致命的问题,就是它不是一个自适应的单位,不会跟着设备尺寸不同而不同,但是没有关系,我们有万能的js,可以去动态的设置它
方法1:
我们可以将1rem设置成屏幕的某一个比例,比如将1rem设置成屏幕的十分之一
假设我们的设计图是640宽的,我们拿到之后量了一下a的宽度为480px,得到比例a所占屏幕3/4,根据rem与屏幕的关系,最后设置成7.5rem
就是说在设置元素的宽度是时候,会根据设定好的比例关系去进行换算
方法2:
如果设计图是640的图,这个时候我们知道它是照着i5来的,我们现在假设世界上所有的手机都是320的,也就是每一个人用的都是i5,在这个理想的情况下,因为手机都一样,尺寸都一样,和pc端的固定布局也就一样了
假设有一个在640的图上我们量得的宽度是320,因为是二倍图,所以我们知道,它的实际宽度是160px,这样的话,我们直接给这个设置设置width:160px就可以了,这个时候,我们玩个花子,不要单纯的使用px来设置,用rem来设置,例如,我可以将rem设置为100px,这样的,刚才的盒子设置为width:1.6rem,算法就是 量的宽度/(dpr*100) = 要设置的rem值
这样我们就可以开心的开发,量一个尺寸,除个2,再小数点推两位,设置就行了,但是我们也知道,手机的尺寸并不可能都是320,这样的话,没有关系,我们可以根据一个比例来算rem到底设置为多少
在手机宽度为320的时候,我们设置的1rem=100px,所以有一个比例 b = 100/320
那么在W宽度的手机上,1rem应该是多少呢?设为x 那么x/w = b
得到x = w/3.2
那么就不要写死html的fontsize为100了。而是用js去设置:
document.documentElement.style.fontSize = document.documentElement.clientWidth/3.2 + 'px’
这样,我们就可以得到一个自适应的rem
常见的需要注意的问题
1px边框
在移动端中,如果给元素设置一个像素的边框的话,那么在手机上看起来是会比一个像素粗的。
解决方法:使用伪类元素模拟边框,使用transform缩放
响应式图片
在移动端中,图片的处理应该是很谨慎的,假设有一张图片本身的尺寸是X宽,设置和包裹它的div一样宽,如果是div宽度小于图片宽度没有问题,但是如果div宽度大于图片的宽度,图片被拉伸失真
解决方法:让图片最大只能是自己的宽度
img{max-width: 100%;display: block;margin: 0 auto;}
移动端事件
移动端中的事件和PC的事件有一些是不同的,例如,mouse部分事件在移动端里没有了
取而代之的是touch事件:
touchstart/touchmove/touchend/touchcancel(玩游戏 忽然来电话)
添加事件的时候可以用ontouchstart,但是有的时候很可能失效,建议使用addEventListener的方式
touchcancel比较少见,在系统取消触摸的时候触发
touch事件对象里面的属性和mouse的略有不同,例如在mouse事件里可以直接从事件对象里取出pageX,clientX,screenX
touch事件对象里有touches,changedTouches,targetTouches三个属性,上面保存着关键的位置信息
它们里面保存的是触发事件的手指的信息,但是要注意,虽然三个里面保存的信息看似都一样,但是在touchend事件里,只能使用changedTouches
click的300ms延迟问题
在移动端中,click事件是生效的,但是它有一个问题,点击之后会有300ms的延迟响应
原因:safari是最早做出这个机制的,因为在移动端里,浏览器需要等待一段事件来判断此次用户操作是单击还是双击,所以就有click300ms的延迟机制,Android也很快就有了
不用click,用自定义事件tap
tap是需要自定义的:如果用户执行了touchstart在很短的时间又触发了touchend,且两次的距离很小,而且不能触发touchmove
使用zepto类库的时候,里面自带tap事件,,但是需要在zepto.js后面加上一段js
zepto官网;Touch模块
百度有一款touch.js的插件教程
hammer.js也是一个手势事件库文档
引入fastclick库来解决
点透bug的产生
点透bug有一个特定的产生情况:
当上层元素是tap事件,且tap后消失,下层元素是click事件。这个时候,tap上层元素的时候就会触发下层元素的click事件
解决方式:
上下层都是tap事件,缺点:a标签等元素本身就是自带的click事件,更改为tap比较困难
缓动动画,让上层元素消失的时候不要瞬间消失,而是以动画的形式消失,事件超过300ms就可以了
使用中间层,添加一个透明的中间元素,给它添加click事件并消失,这个时候接收点透的是透明的中间层
使用fastclick
移动端测试
使用chrome浏览器有移动设备模拟功能,在这里可以做一些模拟测试,但是要注意的是,毕竟不是真机,会有一些测试不到的问题
手机连接上电脑的无线,总之使其在同一个网络里,然后就可以通过ip访问
需要测试的浏览器:
chrome,firefox,UC,百度,QQ,微信,Android,safari
移动端交互
动画效果全部使用css3
JQ生成二维码
可以使用jquery.qrcode.js插件,可以快速的生成基于canvas绘制的二维码
兼容查阅网站
can i use ,在这里可以查看很多属性、api的兼容性
移动端的开发详解与1px边框等注意事项相关推荐
- Android BLE 蓝牙开发指南(三)外围设备端开发详解
Android BLE开发指南(一)入门基础 Android BLE开发指南(二)中心设备端程序开发详解 这篇文章将会详细讲解低功耗蓝牙外围设备端程序开发的主要流程.对于Android开发者而言,或许 ...
- JMessage Android 端开发详解
JMessage Android 端开发详解 目前越来越多的应用会需要集成即时通讯功能,这里就为大家详细讲一下如何通过集成 JMessage 来为你的 App 增加即时通讯功能. 首先,一个最基础的 ...
- NodeJS+Express+mySQL服务端开发详解
NodeJS+Express+mySQL服务端开发详解 随着NodeJS的发展,现在已经被很多人熟知,NodeJS已经成为了前端开发人员必备的技能.本文不会对NodeJS过多介绍 如果你感兴趣可以访问 ...
- 使用KBEngine开发UE4服务端——开发详解
使用KBEngine开发UE4服务端--开发详解 1. 简述 开始正式进入开发,网络上关于开发和修改文件的文章较少,这里会记录自己开发过程中需要更改的地方和一些流程. 2. 前期的配置说明 根据前文配 ...
- Apache Thrift - java开发详解
2019独角兽企业重金招聘Python工程师标准>>> Apache Thrift - java开发详解 博客分类: java 架构 中间件 1.添加依赖 jar <depen ...
- EasyPR中文开源车牌识别系统 开发详解
在上篇文档中作者已经简单的介绍了EasyPR,现在在本文档中详细的介绍EasyPR的开发过程. 正如淘宝诞生于一个购买来的LAMP系统,EasyPR也有它诞生的原型,起源于CSDN的taotao ...
- 《HTML5 canvas开发详解(第2版)》——1.3 本书使用的基础HTML页面
本节书摘来自异步社区<HTML5 canvas开发详解(第2版)>一书中的第1章,第1.3节,作者: [美]Steve Fulton , Jeff Fulton 更多章节内容可以访问云栖社 ...
- C#socket之TCP开发详解(一)
文章目录 C#socket开发详解(一) 简介: 预备知识: 相关概念梳理: 1.什么是socket? 2.什么是TCP/IP.UDP? 3.socket与TCP/IP.UDP的关系? 4.TCP与U ...
- 基于证书的WCF安全开发详解
基于证书的WCF安全开发详解 前几天成功建立起了一套基于证书的安全的WCF服务,很兴奋,现在做一下总结,希望大侠们指点,也希望能帮助到一些菜鸟,哈哈. 一.安全通信的基本过程 这里只做定性的理论上的分 ...
最新文章
- 风暴数码论坛教程--apk和odex的介绍和合并
- python 多边形曲线
- 【直播课】图像分类竞赛技巧与多标签分类实战
- Chrome一直提示“adobe flash player 因过期而遭阻止” ,如何解决?
- 中国大推力矢量发动机WS15 跨入 世界先进水平!
- day2 java的数据转换与强制转换
- IDEA下的第一个springBoot
- Android 简介:Android SDK 和开发框架简介
- 程序员面试金典——17.4无判断max
- java自学路线图(超全超详细)
- java获取当前时间sql_JAVA中获取当前系统时间
- 安装yasm(汇编编译器)和 nasm
- 六祎-简单的排版表(python)
- Python学习:round函数,截取小数位数
- TAPD关联Jenkins
- 华为云备份会上传私密相册吗_2 亿部华为手机背后,这个功能不能忽视
- python-pptx替换ppt模板的文本
- Py人工智能一般用什么框架?
- 使用Canvas绘制调色板和工艺卡片
- 编程之美 1.3 一摞烙饼的排序
热门文章
- 快应用开发必备工具下载
- 录屏软件哪个好?电脑录屏软件排行榜推荐
- linux0.11内存memory.c一些函数的简单的注释(一)
- 期货市场的投资者适当性原则
- 9 9简单的数独游戏python_如何使用tkinter GUI python创建9*9数独生成器?
- python使用pyecharts绘制地图
- c语言;文件名批量修改要求可以修改整个文件内文件名或后缀名自动,Python批量修改文件名...
- codeforces1395D 贪心
- 自定义一个可滑动时间刻度尺
- cocos creator 设置开启canvas 透明后 半透明图片 不正常的 官方解决办法