更改移动用户的文字大小

Question

使用fullpage.js，我创建了一个＆＃39;幻灯片＆＃39;在浏览器中看起来很棒的页面，但在iPhone上它不会缩放文本以适应屏幕（并且它也不可缩放）。

It ends up looking like this

在css文件中，我将字体设置为1.2em，有没有办法让这个文本在iphone上扩展到更可读的大小？

如果您想在手机上查看：

link to example

非常感谢

Answer 1

你可以试试CSS3＆＃34; vw＆＃34;。它支持相对于视口的新维度。

{{1}}

Answer 2

使用媒体查询来调整任何真正使您的网站完全响应的内容

Answer 3

对于每个分辨率，您可以设置不同的CSS含义。例如

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

这意味着如果分辨率不超过300，它将使用不同的背景。如果你不想让所有东西都在同一个css中，那么你可以像这样链接：

<link rel="stylesheet" type="text/css" href="tablets.css"  media="screen and (min-width: 600px) and (max-width: 800px)">