iPhone 5和iPad css媒体查询

我在一个网站上工作，桌面和iPad有3个视图，都是一个视图， 对于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);

---

为什么要将此与@import一起使用？导入css被认为不如同一css文件中的@media screen方法有效。您可以在同一样式表中为所有设备（iPhone、iPad或桌面）定义所有响应（横向或纵向）规则。 试试这个基本的指导方针。 在那之后，从 希望这些能帮助你