Question

我最近完成了＃34;有一个网站（http://calcultr.comxa.com/）。它在我的屏幕上看起来很好，但对我的朋友们来说，＆＃39;屏幕它不适合屏幕。与我的其他设备相同。我已将此添加到Head标记：

<meta name="apple-mobile-web-app-capable" content="yes">
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<meta name="viewport" content="width=device-width, intial-scale=1">

我听过很多人说＃34;这样可以解决问题＆＃34;但是我甚至都不知道这意味着什么。他们说谎了吗？ 如何让我的网站适合任何设备和屏幕？

谢谢。：）

Answer 1

实际上，您只需要以下代码：

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

Answer 2

您的网站无法在朋友计算机上正常显示，因为他/她有另一种解决方案。这是前端设计的复杂部分。您已经为一个分辨率/设备/屏幕设计了您的网站，现在您必须完成其余的工作，或者至少提出适用于大多数设备和屏幕的解决方案。

以下是您的选择：

使用CSS中的百分比进行设计，以便您的页面适应用户屏幕的百分比。 CSS - Percentages or Pixels?
使用媒体查询根据用户调整像素大小;＆＃39; https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Answer 3

如上所述，

<meta name="apple-mobile-web-app-capable" content="yes">
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<meta name="viewport" content="width=device-width, intial-scale=1">

...未添加到源代码的顶部。如果您尝试使其响应，您可能希望添加css媒体查询。

例如，

@media screen and (min-width: 480px) {
    body {
        background-color: blue;
        //whatever styling...
    }
}

Answer 4

尝试查看引导程序。它非常简单，您可以通过为您的ID和类添加一些命名来响应所有设备:)这里是link，希望这会有所帮助！

Answer 5

尝试使用像bootstrap，foundation等框架工作..如果你想要前端设计的跨浏览器兼容性

HTML。让网站适合其他设备和屏幕？

5 个答案: