做自适应网页
1.需求:
接到的需求是做一个官网,同一个网址,在PC端和移动端显示不同,2套并不是简单的隐藏显示的差别。
2.想法:
最先想到的是css3的媒体查询 media-screen 控制在不同尺寸下显示。这里说个题外话,css中的像素单位px,是逻辑像素。不是设备的实际像素。但是,这个临界值并不好设置。
那就用js实现吧,js可以根据navigator.userAgent来识别浏览器。
做法:通过js控制显示的最外层的div(body的子元素):
<body> <div id="container-pc"> <!--PC端内容--> </div> <div id="container-mobile"> <!--移动端内容--> </div> </body>
(function () { var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); var containerPC = document.getElementById('container-pc'); var containerMobile = document.getElementById('container-mobile'); getRem(); addEvent(); function getRem() { if (isMobile) { containerPC.innerHTML = ''; var bodyWidth = document.body.offsetWidth; //chrome最小字体的限制,放大100倍。保证根节点大于12px document.documentElement.style.fontSize = (bodyWidth / 768)*100 + 'px' ; window.onresize = function () { getRem(); }; } else {//PC containerMobile.innerHTML = ''; } } })()
PC端网页设计有最大宽度(比如1920px),还有个内容区域宽度(一般在960px-1200px的范围内)
移动端网页是一个自适应的网页,设计一般给一张宽750px的设计图,需要我们将这个设计图100%显示,在不同设备上进行缩放,固定的px单位无法满足,那就要用到rem这个单位。通过对html节点设置fong-size大小,局部大小就由这个基准决定。我们的设计图宽度是768px,在js代码里有体现,上面代码的第12行:
document.documentElement.style.fontSize = (bodyWidth / 768)*100 + 'px' ;
由于chrome最小字体的限制,根节点html的font-size不能小于12px,所以我们浏览器宽度跟设计图的宽度比放大100倍。写css的时候,设计图标注的宽度要缩小100.比如一个区域设计标注230px*150px,那在css里就是:
width:2.30rem; height:1.50rem;
3.问题:
这样做,PC,移动端显示没有问题,但是在移动端打开,会加载pc端的资源,如图片,因为即使display:none,里面的img标签的图片也会被加载。但是也仅仅是加载<img>里的图片,不会加载background-image的图片,还可以接受。
移动端因为是自适应的网页,所以窗口缩放都要重新计算rem的基准。pc端可以用鼠标拖动缩放浏览器窗口,但是很少见到能缩放的移动端。所以这个计算好像也没那个必要。
对于网页中的mp4文件,如果在<video>中,在国产安卓浏览器播放会浮到最上层,这个做法是做个播放弹窗。<video>资源会默认进入页面加载,导致页面非常慢。可以加个封面,再设置为不预加载。
<video poster="封面图片的地址" preload="none"></video>