移动端项目前端小结（一）
<meta>标签
开发移动端项目需要使用视口标签<meta>来禁止缩放，页面显示时文字就不会变小了：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no" />
这是移动端屏幕适配问题解决过程中会遇到的一环(布局便是另一环)：
1、谷歌浏览器使用手机模式调试时，手机型号旁边是设备独立像素。各种手机屏幕大小看起来差不多，但像素分辨率区别很大，因此使用设备独立像素作为统一单位。
2、设备独立像素与物理像素是有区别的。在320×480的手机上可以认为一个设备独立像素=一个物理像素，但在其他屏幕分辨率下的手机不能这么算。
3、前端使用的CSS像素是一个抽象的概念，会随着页面的放大缩小而改变包含的物理像素的多少，同时CSS像素与设备独立像素之间也有关系：页面的缩放系数 = CSS像素 / 设备独立像素。设置initial-scale=1.0 使得1个CSS像素=1个设备独立像素，前端就可以用CSS像素来写代码了。
4、设置width=device-width，让布局视口=理想视口
5、设置user-scalable=no，禁止用户缩放页面
以上关于移动端屏幕适配、像素等问题都是借鉴学习于下方来源：
1、https://baijiahao.baidu.com/s?id=1634027011072225045&wfr=spider&for=pc
2、https://www.cnblogs.com/iovec/p/7700733.html
3、http://caibaojian.com/mobile-responsive-demo.html
4、https://mp.weixin.qq.com/s/NNNoAHWVujTA8OblnFREHg
移动端布局类问题
1、html字体大小自适应
js方法1：摘自 移动端屏幕适配(rem+js方法)
let htmlwidth=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; let htmlDom =document.getElementsByTagName(\'html\')[0]; htmlDom.style.fontSize = htmlwidth/20 +\'px\';
js方法2：摘自手机端页面自适应解决方案——rem布局
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = \'orientationchange\' in window ? \'orientationchange\' : \'resize\',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=640){
docEl.style.fontSize = \'100px\';
}else{
docEl.style.fontSize = 100 * (clientWidth / 640) + \'px\';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener(\'DOMContentLoaded\', recalc, false);
})(document, window);
以上2种js方法用<script>标签包裹然后放在<head>标签中即可；
CSS方法：摘自 jQuery WeUI框架css文件
html {
font-size: 20px;
}
body {
font-size: 16px;
}
@media only screen and (min-width: 400px) {
html {
font-size: 21.33333333px !important;
}
}
@media only screen and (min-width: 414px) {
html {
font-size: 22.08px !important;
}
}
@media only screen and (min-width: 480px) {
html {
font-size: 25.6px !important;
}
}
2、宽高可以用百分比、rem、em
3、定位和Flex布局移动端都可以用。
sessionStorage设置键值问题
重复对同一个键设置值时，后来设置的会覆盖前面设置的，比如：
sessionStorage.setItem(\'name\',\'ss\'); sessionStorage.setItem(\'name\',\'wwwww\')
最后sessionStorage.getItem(\’name\’)返回的是 wwwww;这一点与formData不同。