web前端之移动端适配

最新推荐文章于 2024-09-06 15:42:11 发布

布袋里长出了橘猫

最新推荐文章于 2024-09-06 15:42:11 发布

阅读量837

点赞数 1

分类专栏：移动端文章标签： ios二维码移动端适配移动端开发

本文链接：https://blog.csdn.net/qq_37617413/article/details/64920828

版权

移动端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

该段代码是将所有的移动端屏幕都缩放成640px，不需要再考虑适配。

<script type="text/javascript">
			if(/Android (\d+\.\d+)/.test(navigator.userAgent)) {
				var version = parseFloat(RegExp.$1);
				if(version > 2.3) {
					var phoneScale = parseInt(window.screen.width) / 640;
					document.write('<meta name="viewport" content="width=640, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');
				} else {
					document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
				}
			} else {
				document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
			}
			//微信去掉下方刷新栏
			if(navigator.userAgent.indexOf('MicroMessenger') >= 0) {
				document.addEventListener('WeixinJSBridgeReady', function() {
					//WeixinJSBridge.call('hideToolbar');
				});
			}
		</script>

在微信H5里面如果用到二维码的识别，就会出现二维码定位不准的问题，识别不了二维码，这个在安卓端是完全没有问题的。由于苹果机的手机分辨率比较大，如果二维码出现在屏幕的下方时，识别不了。
html代码：

<div class="codegroup">
    <p class="mac"><img src="images/mac.png"></p>
    <span>demo</span>
  </div>

css如下：

 .codegroup{
    background-color: #343434;
    font-size: 25.5/16rem;
    width: 320px;
    padding: 6px 6px 0 6px;
    margin: 45px auto;
    p{
      position: relative;
      height: 308px;
      background: transparent url(../images/tj/tj-code.jpg) no-repeat;
      background-size: contain;
    }
    p.dw-code{
      background-image: url(../images/dongwanligong/dw-code.jpg);
    }
    p.gjd-code{
      background-image: url(../images/guangjidian/wjd-code.jpg);
    }
    p.tjdj-code{
      background-image: url(../images/tjdaxueruanjian/tjdrj-code.jpg);
    }
    p.zd-code{
      background-image: url(../images/zhongda/zd-code.png);
    }
    p.mac{
      background-image: url(../images/mac.png);
    }
    img{
      position: absolute;
      top: -60%;
      width: 100%;
      border: 1px solid red;
      opacity: 0;
    }
    span{
      display: inline-block;
      text-align: center;
      padding: 20px 0;
      width: 100%;
    }
  }

根据内容调整padding里面的值。

如有问题请联系我~

欢迎加入QQ群:
在这里插入图片描述