固定宽度,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 }