我在 iPhone safari 浏览器中的 HTML 和 CSS 网站中获得放大的徽标图像。 如何解决？

Question

我在 iPhone safari 浏览器中的 HTML 和 CSS 网站中获得放大的徽标图像。 因为我已经使用媒体查询在 css 中设置了宽度和高度，但我仍然只在 iPhone 上遇到这个问题，而不是在 android 上。

截图图像

请访问此链接获取代码和相关文件： https://github.com/abhijeetjain101/Portfolio-Website

Answer 1

您是否检查过屏幕尺寸是否适用于您的实际 iPhone，有时它们可能会相差 1px

*{
    margin: 0px;
    padding: 0px;
}

/* Small phones line iPhone 5 SE */
@media screen and (max-width:374px) {
}

/* Regular phones like Iphone X + */
@media only screen and (min-width:375px) {
}

/* landscape mobile devices */
@media only screen and (min-width:480px){
}

/* tablet portrait */
@media only screen and (min-width:768px){
}

/* tablet landscape */ 
@media only screen and (min-width:1024px){
}

/*Small Monitor Screen */
@media only screen and (min-width:1280px){}

/* med Monitor Screen */
    @media only screen and (min-width:1440px){}


/* Large Monitor */
@media only screen and (min-width:1920px){}

对于 Web Dev 的任何 CSS 脚本来说，这有点像是我的起点，还请确保如果您使用的是图像大小的响应属性，当您移动到新媒体查询时，您可以根据屏幕需要向下或向上拨动它

Answer 2

只需在样式中给出这段代码img{width:100%;}

Answer 3

只需给出图像的最小和最大宽度，否则使用 % 代替 px 这可能会有所帮助