There is no special new technology, that is, the record I do mobile side of the problem
2016-02-16
The page width of the mobile end is not fixed, so that the page width adaptive method:
1, the direct attribute assignment, the page width is not fixed [I use the first one]
<meta name= "viewport" content= "Width=device-width, initial-scale=1, maximum-scale=1, User-scalable=no" >
2, page div width fixed 320, by JS Control zoom. [if the page is too wide, the scale changes.] Personal feel not available for tablet and PC side]
<script>
(function () {
var meta = document.createelement ("meta");
meta.name = "viewport";
meta.content = "Width=320,minimum-scale=1,maximum-scale=1.3,user-scalable=no";
document.head.appendChild (meta);
if (/android/i.test (navigator.useragent)) {
document.body.style.zoom = document.body.clientwidth/320;
}
})();
</script>
3, page div width fixed 720px, by JS Control zoom. [2 and 3, select 3rd, the problem is that the size of the 720 too large picture too much, affecting the speed, the advent of Kaka]
!function (T, e) {function n (n, R) {var i, o, a = e.documentelement, S = E.queryselector (' meta[name= "viewport"] '), U = M Ath.min (A.clientwidth, a.clientheight); Switch (n) {case "fixed": i = u/r, o = "width=" + R + ", initial-scale=" + i + ", maximum-scale=" + i + ", minimum-scale=" + i; Break Case "REM": var c = T.devicepixelratio | | 1; A.setattribute ("DATA-DPR", c), a.style.fontsize = (U * c/r) + "px", i = 1/c, o = "width=" + U * C + ", INITIAL-SC Ale= "+ i +", maximum-scale= "+ i +", minimum-scale= "+ i} s.setattribute (" Content ", O)} n (" fixed ", net)} (window, docu ment)
My small Front End (3)--special effects on the mobile side-make the page width adaptive