Question

我的网站（www.sauleezy.altervista.org）有一个我无法解决的错误。我设置了两个不同的.css文件，一个用于桌面，另一个用于style.css，另一个用于移动，arm.css。在我的索引中，我设置了这段代码：

 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" type="text/css" href="style.css" media="only screen and (min-width: 1121px)">
 <link rel="stylesheet" type="text/css" href="handheld.css" media="only screen and (max-width:1120px)">

它有效。问题是，如果我在我的计算机上调整页面大小，我可以看到我的网站的正确移动版本，但如果我尝试从我的智能手机访问它我不知道为什么但它没有调整大小正确的内容为什么来自电脑。只有在我查看谷歌浏览器选项＆＃34;桌面模式＆＃34;时，我才能在移动设备上看到正确的视图。在这种情况下，我没有桌面版本，但移动版本，因为我看到它从计算机形成调整大小的窗口。我该如何解决？如果您点击我的网站并尝试，我相信您可以理解。我希望我的解释不是太糟糕。我提前道歉。

Answer 1

您的HTML有一个基本错误：

<!DOCTYPE html>
<html lang="en">
<link rel="icon" 
type="image/png" 
href="Images/Icon-SaulEezy.png">
<head>

您必须在<head>之后实施<html lang="en">，这可能是您<meta name="viewport" content="width=device-width, initial-scale=1.0">被忽略的原因。

将其更改为

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" 
type="image/png" 
href="Images/Icon-SaulEezy.png">

然后在您的移动设备中查看它。

如何为每部智能手机设置网站的标准移动版本

1 个答案: