Html 移动设备上的横幅太小
在某个时刻，我知道我需要咬紧牙关，认真阅读响应性和适应性设计，但我希望有一个真正简单的方法来解决这个问题 我有以下网页，显示在我的桌面浏览器中 这是我手机上的同一页 虽然这里可能很难说，但在我的手机上看到的横幅太小了 理想情况下，我希望这样： 页面内容的宽度和my元素的相应宽度（具有上边框）在桌面上全屏显示时不会占据浏览器的整个宽度，但会占据我手机的整个宽度。 横幅永远不会超过我桌面上图像的像素宽度，但会占据我小型手机的整个宽度。 有什么简化方法吗？您可以使用媒体查询来处理基于视口的样式更改。例如，您可以执行以下操作： 可以使用媒体查询处理基于视口的样式更改。例如，您可以执行以下操作：Html 移动设备上的横幅太小,html,css,responsive-design,adaptive-design,Html,Css,Responsive Design,Adaptive Design,在某个时刻，我知道我需要咬紧牙关，认真阅读响应性和适应性设计，但我希望有一个真正简单的方法来解决这个问题 我有以下网页，显示在我的桌面浏览器中 这是我手机上的同一页 虽然这里可能很难说，但在我的手机上看到的横幅太小了 理想情况下，我希望这样： 页面内容的宽度和my元素的相应宽度（具有上边框）在桌面上全屏显示时不会占据浏览器的整个宽度，但会占据我手机的整个宽度。 横幅永远不会超过我桌面上图像的像素宽度，但会占据我小型手机的整个宽度。 有什么简化方法吗？您可以使用媒体查询来处理基于视口的样式更改。例
除了媒体查询（您应该认真研究这些查询以获得可靠的响应）之外，还需要调整标题中的viewport meta标记。 添加到您的标签中，以指示手机浏览器不要尝试以缩小状态显示页面。 例如：
...
<head>
<link rel="stylesheet" type="text/css" href="Style.css">
<title>Hooray Banana</title>
<meta name="keywords" content="This page is a placeholder for future content.">
<meta name="description" content="sc web group">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
...
然后在手机模拟模式下查看F12或直接在手机上查看。除了媒体查询（您应该认真查看这些查询以获得准确的响应）之外，还需要调整标题中的viewport meta标记。 添加到您的标签中，以指示手机浏览器不要尝试以缩小状态显示页面。 例如：
...
<head>
<link rel="stylesheet" type="text/css" href="Style.css">
<title>Hooray Banana</title>
<meta name="keywords" content="This page is a placeholder for future content.">
<meta name="description" content="sc web group">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
...
然后使用F12，在手机模拟模式下查看或直接在手机上查看。您听说过吗？在手机上按您希望的尺寸制作图像，然后使用媒体查询限制桌面上的宽度。@cocoa:是的，我听说过媒体查询，我知道了基本的想法。但我对他们来说是新手，希望有人能给我指出一个正确的方向，在一个非常简单的网站上用一种非常简单的方法来实现这一点。我想当设备很小的时候，我可以把东西的宽度设为100%，当设备更大的时候，我可以把宽度设为60%。还不确定这是否是最简单的方法。你听说过吗？在移动设备上使图像达到你想要的尺寸，然后使用媒体查询来限制桌面上的宽度。@cocoa:是的，我听说过媒体查询，我知道了基本的想法。但我对他们来说是新手，希望有人能给我指出一个正确的方向，在一个非常简单的网站上用一种非常简单的方法来实现这一点。我想当设备很小的时候，我可以把东西的宽度设为100%，当设备更大的时候，我可以把宽度设为60%。还不确定这是不是最简单的方法。谢谢你的帮助。我们来玩一下这个。只是为示例添加了一把小提琴。谢谢您的帮助。我们来玩一下这个。只是为示例添加了一把小提琴。是的，这一步是必要的。我仍然需要做更多的研究来解释原因，但我知道它正在缩小规模，因为一些未知的原因。默认情况下，如果未指定视口元标记，手机浏览器会尝试显示整个页面。例如，如果将其设置为“初始比例”（initial scale）1，则会告知浏览器最初不要缩小。还可以将“最大比例”设置为1，以告知浏览器在双击时不要放大。基本上：更多细节请参见此处：我希望我的帖子对您有所帮助。任何问题，请一定要问。但我不知道为什么它必须缩小以显示整个页面。因为我们现在都知道，在比例设置为1时，页面可以很好地适应。@JonathanWood，没有meta标记和初始比例1，浏览器会尝试显示整个网页，因此它假设初始比例低于1，比如说0.5。原因是，它试图表现得像桌面浏览器，并像在桌面浏览器上一样显示页面。为什么？因为手机浏览器在台式机之后才出现。通过设置元标记和适当的值，您告诉手机浏览器的行为类似于手机浏览器，并以手机而不是桌面上显示的方式显示页面。若要尝试进一步了解这一点，请尝试更改初始缩放值-将其设置为0.5并查看其在手机上的外观，然后将其更改为1，然后再更改为2。是，这一步骤是必要的。我仍然需要做更多的研究来解释原因，但我知道它正在缩小规模，因为一些未知的原因。默认情况下，如果未指定视口元标记，手机浏览器会尝试显示整个页面。例如，如果将其设置为“初始比例”（initial scale）1，则会告知浏览器最初不要缩小。您还可以将“最大比例”设置为1，以告知浏览器不要这样做
双击时放大。基本上：更多细节请参见此处：我希望我的帖子对您有所帮助。任何问题，请一定要问。但我不知道为什么它必须缩小以显示整个页面。因为我们现在都知道，在比例设置为1时，页面可以很好地适应。@JonathanWood，没有meta标记和初始比例1，浏览器会尝试显示整个网页，因此它假设初始比例低于1，比如说0.5。原因是，它试图表现得像桌面浏览器，并像在桌面浏览器上一样显示页面。为什么？因为手机浏览器在台式机之后才出现。通过设置元标记和适当的值，您告诉手机浏览器的行为类似于手机浏览器，并以手机而不是桌面上显示的方式显示页面。若要尝试进一步了解这一点，请尝试更改初始缩放值-将其设置为0.5并查看其在手机上的外观，然后将其更改为1，然后再更改为2。