针对移动设备和小屏幕的文字溢出问题

Question

我正在尝试针对手机和小屏幕优化我的网站。该网站在1920x1080及以上的任何地方看起来都很完美，但在移动设备上，事情变得非常疯狂。我使用bootstrap，我无法弄清楚我的代码有什么问题导致移动扩展无法正常工作。

我遇到的问题是：看起来我的背景并没有扩展到文本 - 也就是说，这些看起来完全是静态的，文本可能会溢出它们并且堆叠到页面的其他部分。我想要发生的是背景颜色（白色，灰色，深灰色）延伸到移动视图上的文本区域，基本上将其下方的所有内容向下推，从而允许连续滚动页面没有重叠内容

文本溢出：none只阻止文本而不扩展区域。

我怎样才能在移动设备上看起来很棒！？我整天把头撞在墙上，我感到非常沮丧。对于我所犯的错误以及如何纠正错误以达到我想要的效果，我真的可以做一个很好的解释。

提前谢谢。

Github

Website

Answer 1

在每个div上你的身高和％（百分比）。把所有这些拿出来，你的网站就可以了。

我还注意到旋转木马在加载图片时非常慢。如果你将每个压缩到大约200k或更低，它将加载更快，仍然保持分辨率正常。

你有<meta name="viewport" content="width=device-width, initial-scale=0.5">

我建议将其设为.8或.9或1

导航栏菜单无法适应移动屏幕。检查下面的链接，看看如何使用boostrap导航菜单，并按照示例创建一个

http://getbootstrap.com/examples/navbar/

这些部分应该具有相同数量的文本。因此，稍微缩短中间部分，但使所有部分等于文本和行的数量（示例3行或4行文本），以便它们响应。一个解决方法是给一个部分的最小高度，但我不建议这样做

标题学习和解决问题的时间太长了。您可以将其更改为学习

Answer 2

使用视口元标记，将其放在脑中

<meta name="viewport" content="width=device-width, initial-scale=1">

对于字体大小，我更喜欢使用vh（视口高度）＆amp; vw（视口宽度）来控制大小。这样，大小将与设备视图成比例。

但要小心。视口标记可能导致渲染问题与高度。为此，我使用vh。

另外，如果页面适合屏幕，最好使用＆＃34; user-scalable = no＆＃34;在您的视口标记中。但是，如果您希望最终用户不放大和放大，那么只能这样做。出。