我的网站自动调整大小以适合我的 iPhone 屏幕，但图像不合适，我该如何解决？答案

【问题标题】：my website automatically resizes to fit my iphone screen but the images are out of place, how do i fix this?我的网站自动调整大小以适合我的 iPhone 屏幕，但图像不合适，我该如何解决？
【发布时间】：2016-07-14 06:18:26
【问题描述】：

图像/文本/背景在我的桌面上的每个可用屏幕尺寸中都保持在一起，但在我的 iphone 上，文本、背景和图像的大小会乱序。我在 CSS 中所做的所有 @media 更改都不会影响我的 iPhone。 1.) 如何更改我的 css 以便它们出现在我的 iphone 上，以及 2.) 我如何调整我的网站大小，以便所有内容都在我的 iphone 上保持一致。更具体地说，如何调整图像的大小以使它们与我 iphone 大小的屏幕上的文本相关？

以下是我为网站上的每张图片使用的 CSS 示例。

#dragon-image{
position:absolute;
z-index:2;
padding-top:100px;
padding-left:440px;

}

#dragon-image img{
width:340px;

}

我什至不知道从哪里开始。网址是How to Make Kombucha Tea

感谢您的帮助。

【问题讨论】：

标签： css iphone responsive-design

【解决方案1】：

看起来像手机上的原版没有？？？

把它放在你的 html 头中

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

【讨论】：

@ittles 如果您使用媒体，请使用检查器，您可以在构建代码时尝试它在移动设备上的外观
我确实尝试过，但你的 CSS @media 不是为“媒体”完成的，例如：你的 CSS #info-body 中的第 4283 行 --> 宽度 780 像素和高度：1298 像素 w3schools.com /cssref/css3_pr_mediaquery.asp
这段代码让我的导航栏很奇怪，它并没有解决图像问题。有没有办法让我的移动版本与我的桌面版本完全一样？这就是我想要做的。移动版几乎和我的桌面版一模一样，只是所有图像在移动版上都不合适。