Question

我有从React

生成的这个简单的HTML

<!doctype html>
<html><head><title data-react-helmet="true"></title><style type="text/css" data-styled-components="" data-styled-components-is-local="true"></style></head><body><div id="app"><div data-reactroot="">Hello</div></div></body></html>

当我在具有移动视图的Chrome中打开它时，页面尺寸大于屏幕尺寸。在此示例中，iPhone 5尺寸为320x568，但我的页面宽度已经是980px。

上没有使用CSS

这迫使我使用更大的字体大小，在该页面上显得正常，但在桌面上变得非常大。页面大小如何大于屏幕大小？怎么会发生？

Answer 1

您正在寻找的是@media选择器。您详细了解了here。

在代码的底部（或您喜欢的任何地方，但是可以将其放在底部），您可以添加

@media only screen and (max-width: ##px) {

}

在您看到＆＃34; ##＆＃34;的位置，您可以设置您尝试在其中显示代码的手机屏幕的最大宽度。

在括号内侧，您可以重写整个网站以专门适合手机（并且它只显示在最大宽度为## px或更低的手机上），或者您可以简单地编辑一件事，例如这篇文章中的字体大小。

例如，在您的主要帖子中说

.desktop {
font-size: 30px;
}

对于手机，你要放

@media only screen and (max-width: 568px) {
.desktop {
font-size: 15px;
}
}

我希望这会有所帮助！如果是这样，请不要忘记投票并标记为可接受。

Answer 2

找到解决方案here，只需为视口添加元标记

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

Answer 3

网站中有一些页面需要返工，例如将所有内容转换为用于移动屏幕的单个垂直列。在 React Native EditScreenInfo title_uri 中，我添加了一个查询字符串：mob=yes。该值并不重要，但服务器代码使用它来确定它是否是从移动设备调用的。因此，服务器代码确定要使用哪种布局。我还使用 JavaScript 使各种移动标签中的文本尽可能大。

页面尺寸大于实际设备屏幕

3 个答案: