css - 如何确保使用 html5 设计的屏幕支持所有可能的设备尺寸（横向和纵向）

Question

我正在使用 html5 设计移动设备屏幕以创建独立于平台的应用程序。我出于同样的原因使用媒体查询，但这些媒体查询支持一些提到的设备，如 iphone4、ipad、ipad mini、三星设备。无论设备大小/分辨率如何，页面都可以完美地适合任何设备，有什么保证。

谢谢。

Answer 1

我不明白您的媒体查询如何以及为什么如此具体，它们仅涵盖提到的设备。

更好的方法是使用范围媒体查询，例如从引导程序中获取：

/* Large desktop */
@media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
/* Landscape phones and down */
@media (max-width: 480px) { ... }