尝试根据设备宽度隐藏和显示图像答案

【问题标题】：Attempting to hide and show images depending on device width尝试根据设备宽度隐藏和显示图像
【发布时间】：2013-11-13 16:23:33
【问题描述】：

我是响应式网页设计的新手，我正在尝试隐藏当前的大图像并在屏幕宽度小于 480 像素宽时显示一个新的小图像。

当我缩小桌面浏览器的宽度时，这似乎效果很好，但是当我导航到手机上的页面时，它仍然显示大图像。

我正在尝试的代码：

html:

<div id="wrapper">
    <img src="lrgimg" id="lrgimg" alt="" />
    <img src="smlimg" id="smlimg" alt="" />
    <p>Some text , font size will change depending on device width.</p>
</div>

CSS：

#wrapper{
    margin-right:0 auto;
    margin-left:0 auto;
    padding:10px;
    width:80%;
    border:1px solid red;
}
#smlimg{
    display:none;
    max-width:100%;
    max-height:100%;
}
#lrimg{
    max-width:100%;
    max-height:100%;
}

/* media queries */

@media screen and (max-width: 480px){

    #lrgimg{display:none;}
    #smlimg{display:inline;}

    p{
        font-size:30px;
    }

}

我认为max-width 足以满足大多数手机屏幕宽度，但显然即使屏幕宽度保持不变，分辨率也大大提高了。

我的问题是：我可以使用一个标准的@media 查询来满足大多数现代手机浏览器的要求吗？

这是demo

【问题讨论】：

常见故障排除.. 看起来好像您没有设置视口。设置一个，它应该可以在移动设备上运行。
@JoshC 你能扩展一下viewport 吗？
好的，在你页面的head 部分放置这样的内容.. <meta name="viewport" content="width=device-width, initial-scale=1">
@JoshC 在这种情况下似乎没有帮助，但谢谢我会查找视口
根据 JoshC 的评论，您还可以在 content 属性中包含 maximum-scale=1：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 也许这会有所帮助？

标签： html css responsive-design media-queries

【解决方案1】：

根据您的屏幕尺寸，480 像素可能仍然太宽。（如果屏幕尺寸为 480，直到@media screen and (max-width: 479px){ 才会中断，因为@media screen and (max-width: 480px){ 中仍包含 480 的屏幕宽度

更多统计数据：Mobile and desktop screen size statistics

【讨论】：