HTML5:<；图片>；Android设备中的标签和虚拟键盘

我正在为wordpress开发HTML5模板。事实上，我愿意以不同的分辨率/设备展示不同的图像（实际上是同一个图像的作物），关心它们拍摄褶皱区域以上的所有图像。 要做到这一点，我使用元素，它看起来绝对有效，直到我需要在表单中键入某些内容。这看起来像是改变了分辨率或类似的东西，导致显示的图像改变。我不想发生这种事

html代码：

<picture>
    <source media="screen and (device-width:320px) and (orientation:portrait)" srcset="img/nature-wallpaper-320x450.jpg" />
    <source media="screen and (device-width:480px) and (orientation:landscape)" srcset="img/nature-wallpaper-450x320.jpg" />
    <source media="(max-width:360px) and (orientation:portrait)" srcset="img/nature-wallpaper-360x600.jpg" />
    <img src="img/nature-wallpaper-870.jpg" class="img-responsive" />
</picture>

那么，我怎样才能防止这种行为呢？谢谢。

从中，我找到了一个解决方案。尽管如此，据说此解决方案可能无法在所有设备上运行。还有别的吗

<meta name="viewport" content="width=device-width">