移动端网页开发基础

2020-11-09 本文已影响0人 amanohina

移动端开发基础

1.移动端浏览器主要是对webkit内核进行兼容
2.开发的移动端主要是针对于手机端开发
3.移动端开发碎片化很严重，分辨率和屏幕尺寸大小不一
4.学会谷歌浏览器模拟手机界面进行调试

视口

布局视口

一般浏览器都设置了一个布局视口，解决PC端网页在手机上显示的问题
IOS，Android基本设置为980px，PC上的网页大多数都能在手机上呈现，元素很小，需要手动缩放

用户体验不是很好

视觉视口

用户正在看到的网站的区域，网站的区域
通过缩放去操作视觉视口，不影响布局视口，布局视口还是保持原来的宽度

理想视口

使网站在移动端有最理想的浏览和阅读宽度而设定
理想视口，对于设备来说，是最理想的视口尺寸
手动加入<meta>视口标签通知浏览器操作
<meta>视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致（设备多宽，布局视口多宽）

<meta>视口标签

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

属性	解释说明
width	宽度设置的是viewport宽度，可以设置device-width特殊值
initial-scale	初始缩放比，大于0的数字
maximum-scale	最大缩放比，大于0的数字
minimum-scale	最小缩放比，大于0的数字
user-scalable	用户是否可以缩放，yes或no（0或者1）

device-width指的是设备的宽度，自动读取
设置maximum和minimum都是1.0的意思就是不让进行缩放

总结

视口就是浏览器显示页面内容的屏幕区域
视口分为布局视口，视觉视口和理想视口
移动端布局想要的是理想视口——手机屏幕有多宽，布局视口就有多宽
想要理想视口，就要给移动端页面添加<meta>视口标签

二倍图

物理像素&物理像素比

物理像素点指的是屏幕显示的最小颗粒，物理真实存在的。厂商出厂时设置好了的，后期不会改变，比如iPhone6\7\8是750*1334
开发的时候1px不一定是等于1个物理像素的
PC端页面，1个px是一个物理像素，在移动端不一定
1个px能显示的物理像素点的个数，称为物理像素比

比如： iPhone6,7,8这些型号，占满屏幕是375px，物理像素点是750，意思就是物理像素比等于1:2
PC端和早期的手机屏幕/普通屏幕：1CSS像素=1物理像素
Retina（视网膜屏幕）显示技术，可以将更多的物理像素点压缩到一块屏幕里
从而达到更高的分辨率，提高屏幕显示的细腻程度

左边为视网膜屏幕，右边为普通屏幕
差别

多倍图

一张50*50的图片，在retina屏的手机上打开，就会按照物理像素比放大，就会造成模糊
在标准的viewport中，使用倍图提高图片质量，解决高清设备上的图片显示问题

多倍图例子：

问题：如果一个 50 * 50 px的图片放到手机屏幕中，占有的物理像素点是 100 * 100 个，会造成图片模糊
解决方法：使用一个本身就是100 * 100px的图片进行制作，替换原来的图片，设置图片尺寸为50*50px

很明显，第二个图片清晰度更高
到底需要多少倍的图片，看实际开发公司需求
背景图也需要使用高清图（多倍图）进行添加

.box {
      width: 50px;
      height: 50px;
      border: 1px solid #000;
      /* 背景图也需要使用高倍图进行添加 */
      background: url(images/apple100.jpg) no-repeat;
      background-size: 50px 50px;
    }

总结

1.如果是插入图，直接更改宽高（width，height）
2.背景图（更改background-size）

启动图尺寸是用来进行切图的，开发尺寸是用来量尺寸的

@3x 3倍图
@2x 2倍图
@1x 一倍图原图

移动端开发方案

主流方案

单独制作移动端页面（主流）
响应式页面兼容移动端（其次）

单独制作移动端页面

通常情况下，网址域名前面加上m(mobile)可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面
比如：m.taobao.com

响应式兼容PC移动端

响应式网站：PC和移动端共用一套网站，在不同宽度的屏幕下，样式会自动匹配。
比如：

www.samsung.com

缺点：制作麻烦，花费大量精力调整兼容性问题

移动端技术解决方案

浏览器

基本以webkit内核为主，基本就只考虑webkit兼容问题
放心使用H5和CSS3样式
浏览器私有前缀只需要考虑添加-webkit-就行

CSS初始化normalize.css

移动端CSS初始化推荐使用normalize.css。可定制的css文件，让不同的浏览器在渲染网页元素的时候形式更统一，一种现代化的，为H5准备的优秀的替代方案

优点

1.保护了有价值的默认值
2.修复了浏览器的BUG，解决了浏览器的不一致的默认样式
3.模块化的，易用性提高了
4.有详细的官方文档

http://necolas.github.io/normalize.css/

CSS3盒子模型 box-sizing

传统模式盒子宽度计算：盒子的宽度=CSS中设置的width+border+padding
CSS3盒子模型：盒子的宽度= CSS中设置的宽度width里面包含了border和padding，也就是说，CSS3的盒子模型，padding和border再也不会撑大盒子了。
（参考CSS3笔记内的box-sizing词条，怪异盒子模型和标准盒子模型）

https://www.jianshu.com/p/6878764243e7

怪异盒子模型

标准盒模型

如何选择？

移动端可以全部使用CSS3的盒子模型border-box
PC端如果完全需要兼容，建议使用传统模式:content-box，如果不考虑兼容性，就选择CSS3盒子模型

特殊样式

CSS3盒子模型

box-sizing:border-box;
-webkit-box-sizing:border-box;

点击高亮需要清除，设置为transparent完成透明

-webkit-tap-heightlight-color:transparent;

移动端浏览器默认的外观在IOS上加上这个属性才能给按钮和输入框自定义样式

-webkit-appearance:none;

禁用长按页面时的弹出菜单

img,a {
-webkit-touch-callout:none;
}