我在移动web开发中遇到的各种问题

2019年8月28日 88次阅读 来源: 黒之染

安卓web app中有横向滚动（水平滚动）的需求时，有时候不能横向滚动？（在pc和ios中都能流畅地滚）

目前（2015年8月3日15:02:24）在大部分安卓手机都发现这个问题，触发bug的条件知道了，但是原因未知。触发bug的条件是需要横向滚动的层不能位于纵向滚动不是body的层下面（后面有具体解释）。

<div style="width: 300px;height: 500px;overflow: auto;">
    <ul style="overflow-x: auto;white-space: nowrap;">
        <li>我是横向滚动的文字，</li>
        <li>我是横向滚动的文字，</li>
        <li>我是横向滚动的文字，</li>
        <li>我是横向滚动的文字，</li>
        <li>我是横向滚动的文字，</li>
        <li>我是横向滚动的文字，</li>
        <li>我是横向滚动的文字，</li>
    </ul>
    <p style="height: 1000px;background-color: black"></p>
</div>

如上html，如果把div的height: 500px;overflow: auto;去掉，纵向滚动的层是body，此时是正常的，安卓中ul能正常地左右滚动。但是当加上它们之后，此时纵向滚动的层变成了div,这时再来拖动ul发现它不能横向滚动了！（但我发现一个奇怪的现象，同样是有横向滚动的弹窗，只要关掉再打开弹窗，就可以正常地横向滚动了，不需要在纵向滚动层为body的情况下也行）

解决方法：1、让滚动的层变回body就行了。2、保证数据量不会造成纵向滚动也行。
但是做web app，不能保证时时都能直接用body作为滚动层的，尤其是在弹窗中的时候，请问有更好，不使用js的解决方法吗？

div包着img时，div的高度希望自适应到与img一样？

因为img是inline的，只要把img设置为block就行

div包着input时，div的高度希望自适应到与input一样？（pc中不会，手机中会）

需要给input一个固定高度

li个li之间总是有空隙？

原来：
<li><span>内容</span></li>
<li><span>内容</span></li>
<li><span>内容</span></li>

解决方法1：
<li><span>内容</span></li><!--
--><li><span>内容</span></li><!--
--><li><span>内容</span></li>

解决方法2：
<li><span>内容</span>
</li><li><span>内容</span>
</li><li><span>内容</span></li>
    原文作者：黒之染
    原文地址: https://segmentfault.com/a/1190000002490124
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞