适用于所有设备的 HTML5 应用程序的媒体查询

Posted 2023-03-06

【中文标题】适用于所有设备的 HTML5 应用程序的媒体查询

【英文标题】：Media Query for HTML5 App for All Devices

【发布时间】：2014-04-17 22:43:33

【问题描述】：

任何人都有想法，关于所有媒体查询 这将有助于检测单个设备，例如：

ios、iPhone 5、iPhone Ratina 显示屏、安卓手机。 、ipad、平板电脑？

【参考方案1】：

去media-queries-for-standard-devices

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
/* Styles */


/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) 
/* Styles */


/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) 
/* Styles */


/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
/* Styles */


/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) 
/* Styles */


/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
/* Styles */


/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) 
/* Styles */


/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) 
/* Styles */


/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) 
/* Styles */

Retina 显示屏使用

@media 
  only screen and (-webkit-min-device-pixel-ratio: 2), 
  only screen and (min-resolution: 192dpi)  
    /* Retina-specific stuff here */

【讨论】：

谢谢bhai .. 还需要检测ratina display。

@iDevTechnolab: 我现在也加了..!!

@iDevTechnolab: 也检查一下brettjankord.com/2012/11/28/…

你有移动应用UI的模板吗？