Html 如何在手机上提高网站的可读性？

主页/index.html似乎足够公平，可以暂时按原样启动。但当我在手机上的chrome浏览器上看到它时，所有的文字都太小了——尤其是导航栏上——我的视差效果在手机上也不起作用

我尝试在视口中更改比例，但我真的不知道我在做什么。如果有人能在手机上（如果你愿意的话，也可以在桌面上）浏览一下这个网站，并提出一些快速廉价的建议，让它更具可读性，同时保持“美观”，我将不胜感激。如果你知道如何在手机上保持视差不变，那也会很神奇

以下是网站链接和github上的代码：

---

要在手机上放大导航和图像标题，您可以尝试以下CSS：

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

---

在引导中，您必须在

class=“container”

中插入

…

。最好在

.navigation{width:100%；max width:500px；}

中使用百分比，以实现移动兼容性。不使用字体Awesome、PT衬线和Delius Swash大写。加载它们对性能没有好处

如果您正在使用@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是最重要的，在调试完上面提到的所有bug之后，您将拥有一个良好的页面。