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

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值