仅加载适用于 ipad 的 css 文件

2024-03-08

我正在尝试加载仅适用于 ipad 的 css 文件。我试过这个:

<link href="/css/ipad.css" rel="stylesheet" media="all and (max-device-width: 1024px)" type="text/css">

它适用于 iPad,但如果我在桌面上将分辨率降低到 1024 x 768 并在 Firefox 中查看该网站,ipad 样式表也会加载。所以我尝试:

<link href="/css/ipad.css" rel="stylesheet" media="all and (max-device-width: 1024px) and (orientation:landscape)" type="text/css">

但仍然是同样的问题。我如何确保此样式表仅在他们在 iPad 上查看页面时加载?


From: http://css-tricks.com/snippets/css/ipad-specific-css/ http://css-tricks.com/snippets/css/ipad-specific-css/

这对我来说效果更好。

@media only screen and (device-width: 768px) {

/* 对于一般 iPad 布局 */ }

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {

/* 仅适用于纵向布局 */ }

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {

/* 仅适用于横向布局 */ }

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

仅加载适用于 ipad 的 css 文件 的相关文章

  • onMouseEnter 和 onMouseLeave 未按预期运行

    我正在尝试为我的组件模拟悬停效果 然而 onMouseEnter Leave 事件没有按预期工作 现在我试图让它简单地 console log 一个字符串来检查它是否正常工作 但什么也没有发生 目的是我可以在悬停时更改其背景颜色 我尝试通过
  • FF 和 Webkit 中边框折叠的差异

    我有一个包含以下规则的表 table cellspacing 0 cellpadding 0 style width 100 并且单元格具有以下 CSS td padding 4px height 22px border 1px solid
  • 始终滚动 div 元素而不是页面本身

    我有一个带有内部的页面布局 div 包含页面上重要内容的元素 设计的重要部分是 content height 300px width 500px overflow scroll 现在 当包含的文本大于 300px 时 我需要能够滚动它 是否
  • CSS3输入元素的圆角,没有js/图像

    谁可以为输入元素制作圆角 我需要一种不使用 javascript 和图像的方法 Added
  • AngularJS:ng-show 与 display:none

    我有一个用例 我必须使用 CSS 默认隐藏 HTML 元素 如下所示 HTML div class item div CSS item display none 但是 我需要在页面加载后使用 ng show 切换元素的可见性 如下所示 di
  • CSS 按钮将线性渐变背景转换为透明背景

    我有一个带有线性渐变背景 橙色边框和一些文本的按钮 当我将鼠标悬停在按钮上时 我希望背景变得透明 而不更改按钮的其他属性 我尝试将不透明度转换为 0 但显然 这会隐藏边框和文本 我也尝试过转换背景 但它不起作用 因为我没有要转换到的端点 因
  • 向上/向下滚动到带有固定按钮的部分

    我想构建一个用于向上 向下滚动到页面部分标签的脚本 我的源代码如下所示 HTML div class move div class previous UP div div class next DOWN div div section Fi
  • 我应该采取什么圆角方法?

    因此 关于圆角的信息并不缺乏 我已经经历过其中的大部分 我发帖是为了征求社区对这一点的意见 我的场景是 我们正在开发一个圆角相关设计 主要用于交互
  • 可以在 IE 中的表格行上添加渐变吗?

    当我将鼠标悬停在表格特定部分的表格行上时 我希望背景更改为线性渐变 CSS 很简单 tbody row links tr hover background typical multi browser linear gradient code
  • 如何使用 Bourbon Neat Framework 实现移动优先

    我一直在使用 bourbon clean 来进行桌面优先布局 效果很好 不过 我想做一个移动优先版本 从移动开始 然后逐步向上 默认网格为 12 列 对于移动设备 我通常使用 4 列网格 我尝试将网格更改为 4 列 然后扩展到 12 列 但
  • iPad Safari 100% 高度问题

    我的页面上有一个模态 div 它使背景变灰 如果我将overlay div的高度设置为100 它在IE 桌面 上工作正常 但在iPad Safari上 完整的高度不会变灰 究竟是什么问题 这与固定位置 视口有关吗 请帮忙 下面是相同的 CS
  • 背景颜色的不透明度,但不是文本的不透明度[重复]

    这个问题在这里已经有答案了 如何使背景的跨浏览器 包括 Internet Explorer 6 透明div而文本仍然不透明 我需要在不使用任何库 例如 jQuery 等 的情况下完成此操作 但如果您知道有一个库可以实现此目的 我很想知道 这
  • 从 Bootstrap 4 网格中删除装订线

    在 Bootstrap 4 中 我被要求自定义桌面的默认网格系统 如下所示 其中 容器 桌面断点为1280px 我尝试过的例子是 body margin top 3rem l wrap max width 1280px margin rig
  • 如何在 Mac 的任何 webkit 中隐藏父圆角的画布内容?

    我有一个父母div带有圆角 其中包含canvas div div
  • IE8 中空 div 层的 z-index 问题

    我在 IE8 中遇到 z index 问题 其他尚未测试 以下 JS 创建一些 html css document write img src border 0 document write div style background col
  • 如何使用CSS将文本放在“框”的右上角或右下角

    我怎样才能得到here and and here位于右侧 与 lorem ipsums 位于同一行 请参阅以下内容 Lorem Ipsum etc here blah blah blah blah lorem ipsums and here
  • 如何在不设置动画的情况下突然更改 CSS 动画中的属性

    这是我试图弄清楚的 但没有使用 51 关键帧作为实现更改的黑客方法transform origin 这里有一个小提琴演示 http jsfiddle net p7pswnpq keyframes spin 0 transform origi
  • CSS 动画自定义属性/变量

    一段时间以来我一直在努力让它发挥作用 关键是内部 div 将具有某种形状 并且可能会不止一个 这就是为什么我使用nth child选择器 这个内部 div 应该显示然后再次隐藏一段时间 问题是 我想在一个动画中为所有 后来的 多个内部 di
  • 媒体查询:如何定位桌面、平板电脑和移动设备?

    我一直在对媒体查询进行一些研究 但我仍然不太明白如何定位特定大小的设备 我希望能够针对台式机 平板电脑和移动设备 我知道会存在一些差异 但如果有一个可用于针对这些设备的通用系统 那就太好了 我发现的一些例子 Mobile only scre
  • 优化 CSS 交付 - Google 的建议

    谷歌建议在 head 中使用非常重要的 CSS 内联 并在内部使用其他 CSS

随机推荐