移动端适配方法之一(固定宽度)

固定宽度,viewport缩放(width=640)量的是640px,但是实际上缩小2倍就可以了的，
自己设置一个640等宽度,然后进行等比例缩放(目前低版本的安卓不支持) 让640px像素的东西,缩放到iphone5 320的尺寸当中去,怎么个缩放呢,让宽度等比例缩放,高度自适应,所以这样看起来就不会失真,让宽高度等比例的缩放,按照640来进行切图。

 

 1  /*
 2  * 固定页面的尺寸,做一个640的页面为标准,然后进行等比例缩放,整个页面会跟着宽度等比例缩放
 3 * @function scaleFun 等比例缩放函数
 4 * @Object {Number} screenWidth:获取window屏幕的宽度
 5 * @number fixedWidth 设置页面固定宽度
 6 * @number {scale} 缩放比例,屏幕(设备)的宽度/固定的宽度
 7 * @Object {createMeta} 动态的创建meat标签元素
 8 * @Object {metaAttr} 定义一个对象,设置添加属性
 9 * @for..in循环,将metaAttr的属性添加到createMeta中去
10 * @将meta标签添加到head头部中去
11 */
12  window.onload = function(){
13     // 等比例缩放函数
14    function scaleFun(){
15      var screenWith = window.screen.width; // 获取window屏幕的宽度
16      var fixedWidth = 640;    // 固定宽度
17      var scale = screenWith/fixedWidth;  //缩放比例 window屏幕的宽度/固定宽度,这里的640看设计图纸给的像素,如果是750那么就写750,计算缩放比
18      var createMeta = document.createElement("meta");// 动态的创建meta标签 
19      // 设置属性
20      var metaAttr = {
21         name:"viewport",
22         content:'width='+fixedWidth+', initial-scale='+scale+', maximum-scale='+scale+', user-scalable=no'
23      }
24     for(var key in metaAttr){
25         createMeta[key] = metaAttr[key];
26     }
27     // 将createMeat添加到head头中
28 document.getElementsByTagName("head")[0].appendChild(createMeta);
29 /*
30 createMeta.setAttribute('name','viewport');                                               createMeta.setAttribute('content','width='+fixedWidth+', initial-scale='+scale+', maximum-scale='+scale+', user-scalable=no');
31 document.getElementsByTagName('head')[0].appendChild(createMeta);
32 */
33 }
34 scaleFun();                     
35 }

 

转载于:https://www.cnblogs.com/jiapeng76/p/7515863.html