2016-08-26 分类: 网站建设
在公司参与一个原生APP和h5混合开发的项目,本人在项目中负责h5部分,现将项目中遇到的问题总结如下:
具体问题
问题1:页面滚动条问题
问题描述
web页面在PC浏览器上浏览时有滚动条;但是,在移动端浏览器打开时,没有滚动条解决方法
将页面的最外层(我一般在写页面时,会在body标签内写一个大容器,用于存放页面的内容)设置overflow:auto/scroll;并且不能设置height属性的值(height:100%也不行)
//HTML部分: <div class='class1'></div> //css部分: .class1{ border: 1px solid #ccc; } //css部分 /*移动端正常展示1px的问题 start*/ %border-1px{ display: block; position:static; left: 0; width: 100%; content: ' '; } .border-1px{ position: relative; &::after{ @extend %border-1px; bottom: 0; border-top: 1px solid #ccc; } &::before{ @extend %border-1px; top: 0; border-bottom: 1px solid #ccc; } } @media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){ .border-1px{ &::after{ -webkit-transform: scaleY(0.7); transform: scaleY(0.7); } } } @media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){ .border-1px{ &::after{ -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } } } /*移动端正常展示1px的问题 end*/
分享名称:H5与APP混合开发遇到的问题总结
文章网址:/news12/45912.html
成都网站建设公司_创新互联,为您提供网站内链、自适应网站、企业网站制作、网站营销、软件开发、手机网站建设
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联
猜你还喜欢下面的内容