javascript - 怎么解决响应式的问题?

Question

为什么在手机上浏览的webapp网页还可以往左边再那么多?body不是只有屏幕的宽度吗?而且我写的内容也没有超出啊?这怎么解决呢?

Answer 1

在设置body为100%的同时 你也必须得设置html为100%

html,body{ width: 100%; height: 100%;}

这个是整个文档的初始化宽高度 后面的子级都是按照这个数据设置 才可以实现全屏效果 如果你只设置body是不行的

这个问题解决了之后 来说说你的界面（@——@）
字体确实有点丑
估计页面还没有做完
然后有的bug就是
你这个页面刚进去 或者连续刷新页面的话

这部分
会显示{{}} 应该是你要获取数据 没有数据的时候会显示这个 这个是angular里边最常见的一个问题

但是这个问题 还是希望你可以解决好

1. 添加ng-cloak

2. 还有就是获取数据的时候用ng-if判断一下,有的话显示,没有的话不显示

Answer 2

body 100%

Answer 3

去掉<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1" />页面宽度就会缩小到浏览器宽度而不会出现超出

Answer 4

暂时没找出原因，这个可解决X轴溢出：overfow-x:hidden;
还有display为block默认就是占一行的，设置width为100%多此一举

Answer 5

可以使用流式布局（采取百分比的方式以及@media）;纯移动端采取rem布局方式，具体的实现可以网上搜一下很多。

Answer 6

你可能为了让内容距离两边有距离，你一边在父元素加了padding:xxx xxx;或者margin:xxx xxx;

,然后还一边设置了父元素的宽度：width:100%;

        你把父元素的百分比宽度去掉。因为块元素本身默认铺满横屏。
        
        ![图片描述][3]
      
        
        
        
        
        
        
        

Answer 7

img {

max-width: 100%;
border: 0px;
vertical-align: middle;

}