Question

我对移动网页有一个奇怪的要求。该页面仅在移动设备上查看（Android 4.4及更高版本以及iOS 7及更高版本）。

该页面只有一个图像，没有别的。宽度设置为100％的图像。如果图像太小而无法填满屏幕，我们希望将其放到页面底部（图像有一些特殊的东西需要在页面底部看到）。我们的快速解决方法是：

img { position: absolute; bottom:0 }

如果图像太小，这样可以正常工作，但如果您将手机翻转为横向，则无法向上滚动图像顶部。

是否有一种方法可以使图像仅在屏幕上填充屏幕/更高时才被强制到底部？

首选CSS解决方案，但JS也可以。

Answer 1

使用@media在CSS中完全可以实现。请考虑以下代码::

@media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) {
    img { 
        /* do things */
    } 
}