如何提高我的网站在移动设备上的可读性？答案

【问题标题】：How can i improve readability of my website on mobile?如何提高我的网站在移动设备上的可读性？
【发布时间】：2019-10-11 05:56:59
【问题描述】：

homepage/index.html 似乎足够公平，可以暂时按原样启动。但是当我在移动设备上用 chrome 查看它时，所有的字体都太小了——尤其是在导航栏中——而且我的视差效果在移动设备上也不起作用。

我尝试在视口中更改比例，但老实说，我不知道自己在做什么。如果有人可以在移动设备上查看该网站（如果您愿意，也可以在台式机上查看），并可能就一种快速廉价的修复方法提出一些建议，以使其更具可读性，同时保持其“漂亮”的外观，我将不胜感激'。如果您知道如何在移动设备上保持视差不变，那也太棒了！

这里是网站的链接，以及 github 上的代码：

https://ido-weddingsandevents.herokuapp.com/index.html

https://github.com/if-true/i_do_weddings_and_events/blob/master/index.html

【问题讨论】：

您是否考虑过使用<meta name="viewport" content="width=device-width"> 而不是<meta name="viewport" content="width=1280">？然后您可以使用媒体查询根据设备宽度调整字体大小

标签： html css twitter-bootstrap

【解决方案1】：

要使您的导航更大并且您的图片标题在移动设备上，您可以试试这个 CSS：

@media (max-width: 860px){
.navigation li a {
    font-size: 80px;
}
.parallaxImage h2 {
    font-size: 56px;
    line-height: 94px;
}}

【讨论】：

【解决方案2】：

在 Bootstrap 中，您必须在 class="container" 中插入 <div class="row">...</div> 。更好地使用.navigation { width: 100%; max-width: 500px; } 中的百分比以实现移动兼容性。不使用 Font-Awesome、PT Serif 和 Delius Swash Caps。加载它们不利于性能。

如果你使用@media，像这样设置，例如

.navigation li a { font-size: 24px; }
@media (min-width: 768px) {
  .navigation li a { font-size: 36px; }
}
@media (min-width: 992px) {
  .navigation li a { font-size: 60px; }
}
@media (min-width: 1200px) {
  .navigation li a { font-size: 72px; }
}

重要使用

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

【讨论】：

为什么给-1 来调试这个网站？这些 bug 是最重要的，调试完所有提到的，你会有一个很好的页面。