web前端之移动端适配
2017-03-22 16:10
573 查看
该段代码是将所有的移动端屏幕都缩放成640px,不需要再考虑适配。
在微信H5里面如果用到二维码的识别,就会出现二维码定位不准的问题,识别不了二维码,这个在安卓端是完全没有问题的。由于苹果机的手机分辨率比较大,如果二维码出现在屏幕的下方时,识别不了。
html代码:
css如下:
根据内容调整padding里面的值。
<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里面的值。
相关文章推荐
- 移动端 Web 开发前端知识整理
- web前端-移动端小技巧
- 国内外移动端web适配屏幕方案
- 移动端前端适配方案对比
- 移动端案例、web前端项目实战(HTML5+css3)、webApp实例源码
- 前端编程提高之旅(十八)----移动端web流行交互技术方案研究
- 移动端开发中是不是你如何给webview设置适配屏幕都没效果,可能是这种原因
- 移动端Web适配的两种做法思路总结
- 移动端 Web 开发前端知识整理
- 移动端web适配
- 再谈移动端Web屏幕适配
- 移动端和web端前端UI库—Frozen UI、WeUI、SUI Mobile
- web前端 —— 移动端知识的一些总结
- 国内外移动端web适配屏幕方案总结
- 移动端WEB前端开发最佳实践
- tips 前端 移动端 web iscroll 5 自译文档 api速查
- 移动端 移动web屏幕适配方案 随不同宽度的屏幕而改变
- web前端 —— 移动端知识的一些总结
- WEB前端 | JS基础——(11)移动端事件
- 移动端开发App、Web屏幕适配参考