iPhone 5 和 iPad CSS 媒体查询

Question

我正在使用具有 3 个桌面和 iPad 视图的站点，两个视图都指向一个视图， 而对于 iPhone/iPod 则不同，第三个是警告将您的设备变为纵向，因为在该方向上可以更好地欣赏图形，问题是 iPhone5 横向获得了 iPad 版本的一点点，我的意思是一点点它隐藏了大部分内容，但没有向我显示旋转设备的警告，任何想法或建议，这是媒体查询。

/* ---------- iPhone/iPod Only Portrait ---------- */
@import url('../css/portrait.css') only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait);
/* ---------- Retina iPhone/iPod Only Portrait ---------- */
@import url('../css/portrait.css') only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) and (min-device-pixel-ratio : 2) and (max--moz-device-pixel-ratio: 2);
/* ---------- Non Retina iPhone/iPod Only Portrait ---------- */
@import url('../css/portrait.css') only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) and (min-device-pixel-ratio : 1) and (max--moz-device-pixel-ratio: 1);
/* ---------- iPhone5 portrait Only ---------- */
@import url('../css/portrait.css') only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) and (min-device-pixel-ratio : 2) and (max--moz-device-pixel-ratio: 2);


/* ---------- iPhone/iPod Only Landscape ---------- */
@import url('../css/landscape.css') only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape);
/* ---------- Retina iPhone/iPod Only landscape ---------- */
@import url('../css/landscape.css') only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) and (min-device-pixel-ratio : 2) and (max--moz-device-pixel-ratio: 2);
/* ---------- Non Retina iPhone/iPod Only landscape ---------- */
@import url('../css/landscape.css') only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) and (min-device-pixel-ratio : 1) and (max--moz-device-pixel-ratio: 1);
/* ---------- iPhone5 landscape Only ---------- */
@import url('../css/landscape.css') only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) and (min-device-pixel-ratio : 2) and (max--moz-device-pixel-ratio: 2);




/* ---------- iPad Only Portrait---------- */
@import url('../css/style_respond.css') only screen and (min-device-width:  768px) and (max-device-width: 1024px) and (orientation: portrait);
/* ---------- iPad Portrait Retina Device Only ---------- */
@import url('../css/style_respond.css') only screen and (min-device-width:  768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2)and (min-device-pixel-ratio : 2) and (max--moz-device-pixel-ratio: 2);
/* ---------- iPad Portrait Non Retina Device Only ---------- */
@import url('../css/style_respond.css') only screen and (min-device-width:  768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1)and (min-device-pixel-ratio : 1) and (max--moz-device-pixel-ratio: 1) ;


/* ---------- iPad Only landscape---------- */
@import url('../css/style_respond.css') only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape); 
/* ---------- iPad landscape Retina Device Only ---------- */
@import url('../css/style_respond.css') only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-max-device-pixel-ratio: 2)and (min-device-pixel-ratio : 2) and (max--moz-device-pixel-ratio: 2) ;
/* ---------- iPad landscape Non Retina Device Only ---------- */
@import url('../css/style_respond.css') only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-max-device-pixel-ratio: 1)and (min-device-pixel-ratio : 1) and (max--moz-device-pixel-ratio: 1) ;

@import url('../css/style_respond.css') screen and (orientation:landscape) and (min-width: 1024px);

Answer 1

你为什么将它与@import 一起使用？在同一个 css 文件中，导入 css 的效率不如 @media screen 方法。您可以在同一个样式表中为所有设备（iPhone、iPad 或桌面）定义所有响应式（横向或纵向）规则。 试试这个以获取基本指南Web Designer Blog on Mediaqueries.。 之后获取所有特定于设备的设备，例如-iPhone 5 as well as iPad，来自here. 的要点 希望这些对您有所帮助。