移动端开发-CSDN博客

本文链接：https://blog.csdn.net/weixin_44373861/article/details/88651168

移动前端开发正逐渐步入前端技术的主流，事实上跟在一般的PC上，并不需要你掌握额外的技术，然而你在PC Web上那一套在多数情况下并不适用于手机Web，你必须知道这其中的注意点。But，移动端布局最爽的就是再也不用考虑各种对IE的兼容了!

一 . 首先来说一下移动端和pc端页面布局的不同点

显示设备（屏幕）
操作（鼠标、指尖）
浏览器内核:移动端不用考虑ie，但是各种浏览器内核（手机自带）、微信浏览器内核
运行设备移动设备（轻便、迅速、便携） pc端（体验）
网络不同移动4g（注重速度） pc光纤（注重体验速度）

二 . 做移动端页面和pc端页面使用的方法也不同

页面设置不同：

1.Meta标签设置

2.单位=======用来适应不同的移动端屏幕尺寸：

Px像素。类似绝对单位。其实也是相对单位，相对于屏幕的分辨率；
Pt磅点打印的尺寸
Em 相对单位，相对于父级的font-size 1em=父级的font-size（直接的父级）
Rem相对单位，相对于根元素的font-size 1rem=根元素的font-size(移动端尽量使用rem作为单位)
Vw，vh相对单位，相对于屏幕的宽度和高度，1vw==1%屏幕的宽度

三 . Meta标签的设置不同(HBuilder中快捷键 “m+7” 可以直接生产该meta标签)

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

width=device-width:宽度等于当前设备的宽度
intial-scale:页面首次被显示是可视区域的缩放比例，取值1.0则页面按实际尺寸显示，无任何缩放
maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，
maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
user-scalable:是否可对页面进行缩放，no 禁止缩放

Meta标签的设置不同及其不同的效果（扩展）

1.强制让文档与设备的宽度保持1：1

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

2.忽略页面中的数字识别为电话号码

<meta name="format-detection" content="telephone=no">

3.忽略页面中的邮箱格式为邮箱

<meta name="format-detection" content="email=no"/>

4.在web app应用下状态条（屏幕顶部条）的颜色

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

四 . Js方法获取HTMLfontsize（自动刷新）

<script>
         window.onload = function(){
         /*640代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
         getRem(640,100)
         };
         window.onresize = function(){
         getRem(640,100)
         };
         function getRem(pwidth,prem){
           var html = document.getElementsByTagName("html")[0];
           var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
            html.style.fontSize = oWidth/pwidth*prem + "px";
         }
</script>