android前端 问题,web前端问题:android自带浏览器显示问题

严重怀疑楼主是布局问题，象这样的布局甚至都不用@media媒体查询都能搞定，代码如下：

div class='cont'ullidiv class='inner'divimg src='1.png' class='cimg'//divdiv图片下的文字/div/div/lilidiv class='inner'divimg src='1.png' class='cimg'//divdiv图片下的文字/div/div/li lidiv class='inner'divimg src='1.png' class='cimg'//divdiv图片下的文字/div/div/li /ul /divstyle .cont{margin:20px 10px;} ul {margin:0px;padding:0px;list-sytle:none;} li{width:33.333333%;}.inner{margin:0 12px;}.cimg{width:100%;margin-bottom:12px;} /style上面是在不使用flex，box-sizing属性的时候最标准的三列实现模型，可以兼容任何屏幕宽度的浏览器，包括手机和电脑。

如果楼主只需要手机端的先是那么可以用box-sizing:border-box这个属性使得div等的宽度包括边框和padding值，flex可以实现等分为几列，代码如下：

.cont{display:-moz-box; /* Firefox */display:-webkit-box; /* Safari and Chrome */display:box;width:300px;border:1px solid black;}.fx{-moz-box-flex:1.0; /* Firefox */-webkit-box-flex:1.0; /* Safari and Chrome */box-flex:1.0;border:1px solid red;box-sizing:border-box;padding:0 12px; }/stylediv class='cont'div class='fx'divimg src='1.png' class='cimg'//divdiv图片下的文字/div/divdiv class='fx'divimg src='1.png' class='cimg'//divdiv图片下的文字/div/divdiv class='fx'divimg src='1.png' class='cimg'//divdiv图片下的文字/div/div /div这样的话父元素定义display：box，然后子元素定义box-flex：1，就可以实现三个div各占1份的宽度比例。当然这个属性IE是不支持的，IE11都不支持，所以只能适合手机端使用。这段代码可以在chrome下测试

取消

评论