1

我正在使用具有 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);
4

1 回答 1

0

你为什么将它与@import 一起使用？在同一个 css 文件中，导入 css 的效率不如 @media screen 方法。您可以在同一个样式表中为所有设备（iPhone、iPad 或桌面）定义所有响应式（横向或纵向）规则。试试这个，了解关于 Mediaqueries 的 Web Designer 博客的基本指南。. 之后获取所有特定设备，如iPhone 5 和 iPad，从这里开始。 希望这些能帮助你。

于 2013-04-03T20:13:53.110 回答