HTML – iPad只有媒体查询景观野生动物园

概述使用CSS时,我可以使用css与Chrome正确对齐我的元素.在铬检查员 – > ipad视图,看起来都应该如此.但是当我在实际的iPad上测试它时,一些CSS没有被应用.我发现ipad特定的CSS媒体查询如下, ** /* Safari 7.1+ */ **_::-webkit-full-page-media, _:future, :root .my-class { padding-r 使用CSS时,我可以使用CSS与Chrome正确对齐我的元素.在铬检查员 – > ipad视图,看起来都应该如此.但是当我在实际的iPad上测试它时,一些CSS没有被应用.我发现ipad特定的CSS媒体查询如下,

** /* Safari 7.1+ */ **_::-webkit-full-page-media,_:future,:root .my-class {    padding-right: 0;}**/* Safari 10.1+ */**@media not all and (min-resolution:.001dpcm) { @media  {   .my-class {    padding-bottom: 0;  }  }}  **/* Safari 6.1-10.0*/**@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { @media{    .my_class {    padding-bottom: 0;  } }}

问题是,虽然它们在纵向模式下工作正常,但我没有指定的方法将CSS应用于横向模式.如何在iOS上的真实iPad设备/ Safari中使用媒体查询进行横向模式？不影响任何其他浏览器？

更新

我不是在寻找标准媒体查询,

@media only screen and (min-device-wIDth : 768px) and (max-device-wIDth : 1024px) and (orIEntation : portrait) { /* STYLES */ }

景观模式

@media only screen and (min-device-wIDth : 768px) and (max-device-wIDth : 1024px) and (orIEntation : landscape) { /* STYLES */}

解决方法 单独使用媒体查询无法实现您所寻找的内容,您必须使用JavaScript查找Ipad Safari用户代理：

function isiPad() {  return (    (navigator.userAgent.tolowerCase().indexOf(/iPad/i) > -1)  );}

使用此JavaScript,您可以检测设备是否为Ipad,并在主体上应用类 – 在以下示例中使用Jquery：

if (isIpad) {  $('body').addClass('isIpad');}

然后,按照上面的建议编写媒体查询：

@media only screen and (min-device-wIDth : 768px) and (max-device-wIDth : 1024px) and (orIEntation : landscape) {   .isiPad .myclass {    /*styles*/  }}

虽然我可以看到为什么需要iPad差异化,但我无法理解为什么Safari差异化 – 因此,用户会访问与Safari相同的网页/ webapp并看到与Chrome或Opera或其他浏览器相比的不同内容？ ：/ UX-wise听起来不对.

总结

以上是内存溢出为你收集整理的HTML – iPad只有媒体查询景观野生动物园全部内容，希望文章能够帮你解决HTML – iPad只有媒体查询景观野生动物园所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。