如何在移动设备上全屏显示网站

Question

11

这里有一个网站，虽然不是响应式的，但它适应移动屏幕的完整宽度。 http://www.tones.be （在移动设备上打开，您就会明白我的意思。它没有水平滚动条，是桌面网站的缩放版本）。我也想建立类似的网站，但无法弄清楚如何实现。我知道如何使用媒体查询来处理屏幕大小。任何建议都将有所帮助。

- TechHelp

你尝试过在CSS中使用width: 100%;吗？这样应该可以使宽度与屏幕大小无关，无论是移动设备还是桌面设备。 - Tricky12

大多数手机浏览器会自动缩放到所需的大小，而不需要滚动条。该网站没有使用任何meta="viewport"标签。 - Papa

我应该删除视口标签吗？ - TechHelp

4个回答

7

您可以尝试在页面头部添加以下内容：

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

尝试使浏览器以全宽度显示页面。

- Dan Urbanowicz

请发布您的HTML和CSS代码，然后有人应该能够为您解决这个问题。 - Dan Urbanowicz

@TechHelp，你解决了吗？如果是的话，你做了哪些修改？ - Kamesh

这只占用了我手机屏幕大约三分之二的宽度，右侧有太多的空白... - boardtc

1

您可以尝试这个解决方案。对我起作用了。

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

- Kirill Ryzhkov

使用此功能后，链接变得非常小且难以阅读，无法进行缩放。 - boardtc

0

我发现

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

对我来说很有效。它加载页面时完全缩小，但允许用户放大以便阅读文本。

- Tamir Sharif

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kcsoft · Accepted Answer

将元标记放在头部

<head>
    <title>My Website</title>
    <meta name="viewport" content="user-scalable = no">
</head>