移动web

Posted 2020-08-08 5毛钱小辣条

1. 移动WEB
1.1 移动端浏览器
现在移动端使用最多的浏览器内核为webkit,所以相对电脑端来说,移动端的前端开发更加方便.但是不同于电脑端,移动端的分辨率却是一个比较重要的部分.
1.2 移动WEB开发注意
在移动端,我们需要注意一个视口的概念,视口就是用户移动端可视区域的大小,现在市面上视口大小种类较多,如果在开发时还是按照电脑端的布局的话,会出现只兼容了一致分辨率,不支持其他分辨率的情况.
所以我们对于移动端web开发会采用百分百的形式来进行布局.
1.3 移动web视口
现在市面上使用的移动设备分辨率各有不同,那如何才能使一个页面满足不同分辨率的要求呢?
html中已经给出了答案,html中提供了一个meta标签name属性值,及其一系列的属性设置.
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 在这个标签中有几个比较常用的属性值:
width=device-width设置页面自动适配移动端的视口宽度;
user-scalable=no设置用户是否能够缩放页面大小,no为用户不能缩放,yes为用户能够缩放;
initial-scale=1.0设置页面的默认缩放比例,通常设置为1.0;
maximum-scale设置页面最大的缩放比例;
minimum-scale设置页面最小的缩放比例.
但是在电脑端页面设置meta标签属性时,没有效果.
1.4 移动web中特别的样式属性
-webkit-tap-highlight-color: transparent;去除移动端默认的手指点击时的高亮效果
-webkit-box-sizing:border-box ;添加盒子模型为了优先保证盒子的大小,不影响页面布局.
-webkit-appearance: none;有一些移动端的浏览器会有默认的3d效果,比如阴影,3d渐变等