当前位置: 首页 > 面试题库 >

如何使用媒体查询将iPad的CSS定位为目标,但排除Safari 4桌面?

龙星渊
2023-03-14
问题内容

我正在尝试使用媒体规则将CSS仅定位到iPad。我想排除iPhone / iPod和桌面浏览器。如果可能的话,我也想排除其他移动设备。

我用过了

<style type="text/css" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)">

但是刚刚发现桌面Safari 4可以读取它。我尝试使用“ 481px”而不是“ 768px”进行变体,而另一个为它添加了方向:

<style type="text/css" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">

但没有运气。(稍后,我们将嗅探iPad的用户代理html" target="_blank">字符串,但目前该解决方案不起作用。)

谢谢!

更新:桌面Safari目前似乎使用屏幕的宽度和高度,并根据其纵向或横向进行显示。宽度和高度似乎并不能排除桌面浏览器(除非我遗漏了某些东西)。


问题答案:

media=”only screen and (device-width: 768px)”

感谢MislavMarohnić的回答!

这适用于iPad的任一方向,并且似乎不包括桌面Safari。

在测试时,(min-device-width: 768px) and (max-device-width: 1024px) 我可以看到Safari4使用了样式,或者在扩大或缩小窗口时忽略了样式。在测试时,(device-width:768px)我尝试使桌面Safari浏览器的宽度恰好为786px,但我从未看到过这种样式。



 类似资料:
  • 问题内容: 嗨,我正在使用多个平板电脑设备,iPad,Galaxy Tab,Acer Iconia,LG 3D Pad等。 iPad-1024 x 768 LG Pad-1280 x 768 Galaxy Tab-1280 x 800 我只想使用CSS3媒体查询来定位iPad。由于LG和iPad的设备宽度是768像素-我在分离每个设备时遇到了麻烦。 我已尝试将以下内容分开,但似乎无法正常工作: 我

  • 问题内容: 我非常热衷于在CSS中使用媒体查询,但是我对如何使用它感到困惑。我有立场 我的查询要求是 如果屏幕宽度是100到480,那么会出现不同的样式, 如果屏幕宽度从481到600,那么会出现不同的样式, 如果屏幕宽度为601到800,那么会出现不同的样式, 如果屏幕宽度为801,则默认CSS应该有效。 问题答案:

  • 主要内容:1. 媒体类型,2. 媒体特性,3. 逻辑操作符,4. 定义媒体查询随着移动设备的快速普及,用户不再只是通过传统的电脑系来浏览 Web 内容,越来越多的用户开始使用各种尺寸的智能手机、平板电脑或者其它设备来浏览 Web 内容,为了确保使用不同设备的用户都能拥有不错的体验就需要用到媒体查询。 媒体查询是 CSS 样式表最重要的功能之一,所谓媒体查询指的就是根据不同的媒体类型(设备类型)和条件来区分各种设备(例如:电脑、手机、平板电脑、盲文设备等),并为它们分别定义不

  • 问题内容: 是否有@media查询仅针对运行iOS的设备? 例如: 这还会以这些设备宽度改变Android设备上页面的行为吗? 问题答案: 是的你可以。 YMMV。 之所以有效,是因为仅 Safari Mobile 实现了 请注意,在IE中不起作用。IE将跳过以上两个块。 警告:未来几年,iOS可能会在任何新的iOS版本中删除对此的支持。

  • 我想将此条件转换为CSS媒体查询: 编辑: 事实上,我想在这种情况下瞄准Ipad: 因此,如果是任何设备和当前宽度,则应应用CSS 谢谢

  • 问题内容: iPhone 5的屏幕更长,无法捕捉到我网站的移动视图。iPhone 5新增了哪些响应式设计查询,可以与现有iPhone查询结合使用吗? 我当前的媒体查询是这样的: 问题答案: 另一个有用的媒体功能是。 请注意, iPhone 5没有16:9的宽高比 。实际上是40:71。 iPhone <5: iphone 5: iPhone 6: iPhone 6 Plus: iPad: