iPad 专用 CSS | CSS-Tricks

Chikezie

# 2010 年 10 月 8 日

没什么大不了的。但是你在第二行注释中缺少一个闭合斜杠。

谢谢！

adam

# 2010 年 11 月 10 日

我很想看到一个关于 iPad 设计的屏幕录制。
我相信它和你制作的 iPhone 版本类似，但仍然……

web-engineer

# 2011 年 5 月 25 日

此 CSS 也会被*所有小屏幕*使用 - 这可能不理想，因为通常 CSS 问题（例如固定位置）可能不适用于例如上网本，因为浏览器和操作系统可能与 iPad 不同……。

Ira

# 2011 年 10 月 3 日

我想知道，为什么设备宽度为 768？为什么不等于 1024？

Chet Tailor

评论永久链接# 2011 年 11 月 7 日

1024px 是最长的一侧，768px 是最短的一侧，因此您需要确保 CSS 也可以在 iPad 的最短一侧正常工作。它是 iPad 专用的。

最小宽度 481px 到最大宽度 1024px 是为了确保 CSS 在此情况下 iPhone 和 iPad 之间的任何设备的设置方向下都能正常工作。

希望这有帮助。
WA

评论永久链接# 2013 年 10 月 2 日

这取决于设备（iPad）的方向，是纵向还是横向。因此，纵向方向的宽度为 768，高度为 1024，而横向方向的宽度为 1024，高度为 768。

@johnsin

# 2012 年 1 月 26 日

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
/* 仅适用于纵向布局 */
}

这会在较新的 Android 设备上导致一些问题。我发现为了让 iPad 的纵向样式不被我的 Galaxy S2 设备获取，需要使用

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

}

替代……我知道这不是真正的解决方案，但需要注意到这一点。

designer

# 2012 年 3 月 6 日

这段代码对我来说似乎没有任何作用……我做错了什么？

#page {
	/*standard layout*/
	margin: 2em auto;
	width: 994px;
	border:4px;
	border-style:solid;
	border-color:#ffffff;
}
@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
  #page {
		display:block;
		position:absolute;
		left:50%;
		top:30px;
		margin-left:-500px;
		width: 994px;
		border:4px;
		border-style:solid;
		border-color:#ffffff;
	}
}

jason doherty

评论永久链接# 2013 年 1 月 23 日

哇：D

molbal

# 2012 年 3 月 10 日

@designer：尝试这样做：#page @media only screen and …. { .. }

Tim

# 2012 年 3 月 19 日

如果没有 iPad，有没有办法测试 css？类似于 IE 测试器用于移动设备？尝试过 http://ipadpeek.com/，但它没有应用样式。

trees

评论永久链接# 2012 年 8 月 23 日

试试 BrowserStack http://www.browserstack.com/user/dashboard
Chris

评论永久链接# 2012 年 12 月 14 日

@Tim 如果你使用的是 Mac，请获取：Xcode，它具有 iOS 模拟器（iPhone 和 iPad）。这里有一个简短的视频来帮助你获取它。 http://www.youtube.com/watch?v=oobXPWHx3ZI

然后转到 http://moduscreate.com/enable-remote-web-inspector-in-ios-6/ 以在 Safari 中启用开发者模式。
将两者结合起来，就像大多数浏览器中的元素检查器一样，只是针对 iPhone 和 iPad :)

我还没有在 Windows Safari 上测试过 - 还有其他人知道吗？

chris

# 2012 年 3 月 21 日

感谢你提供的代码片段提示，我之前没有意识到它这么简单。:-)

对于那些尝试在 ipadpeek.com 上运行上述代码的人，首先需要执行一些操作。

1. 在 html 页面顶部，紧跟在开始标签下方插入以下元标记。

2. 当你准备好查看你的网站时，你需要将显示器分辨率更改为 1024×768 并刷新 ipadpeek.com 浏览器页面。

chris

评论永久链接# 2012 年 3 月 21 日

抱歉重复发布，但标签代码没有显示在上文。

这是我提到的元标记。

<meta name="viewport" content="width=device-width" />

Stephen Marx

# 2012 年 3 月 27 日

@media only screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-min-device-pixel-ratio: 1)
{
/* 你的 iPad 专用规则在此处 */
}

Vincent Barnhard

# 2012 年 4 月 18 日

@media only screen and (device-width: 768px)
{
#background img {
display: none;
}
/* 你的 iPad 专用规则在此处 */
}

brandon

# 2012 年 4 月 30 日

哇，快速简单的修复！感谢分享此技巧，它为我节省了巨大的麻烦。

谢谢！

Tom Harker

# 2012 年 5 月 22 日

iPad 3 怎么办，它的分辨率高于 768px

SirKay

# 2012 年 6 月 30 日

在 iPad 3 上测试过，运行良好
（这个有效）

@media only screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-min-device-pixel-ratio: 1)
{
#background img {
display: none;
}
}

)

adasdasdas

评论永久链接# 2012 年 7 月 29 日

@SirKay
你太酷了！你提供的代码 100% 有效。谢谢。

Dave

# 2012 年 7 月 26 日

我有一个相关的问题。答案可能涉及使用本文中描述的媒体查询（或其他内容）。如果你的页面内容的高度小于 1024px，是否有技术可以使页脚调整，以便在 iPad 上纵向查看时，页脚背景（颜色或图像重复）一直延伸到页面底部？我假设这是一个标准问题，但我还没有看到任何解决方案。我认为页脚是最明显的需要调整的 div，但也可能存在其他技术或 div 可以在此用例中“保存”设计。任何建议都将不胜感激。

sabrina

# 2012 年 8 月 13 日

我应该使用

加号
@media only screen and (device-width: 768px)
{
#background img {
display: none;
}
/* 你的 iPad 专用规则在此处 */
}
还是可以不用这段代码？

sabrina

评论永久链接# 2012 年 8 月 13 日

出于某种原因，这段代码 meta name=”viewport” content=”width=device-width” 没有出现在上面的空白区域。

Johan

# 2012 年 9 月 14 日

哇！几天来一直在寻找如何解决这个问题，现在一切都可以在 iPad 上正常运行，而不会在其他浏览器中搞乱网站。

非常感谢这篇文章！

Mick Lehr

# 2012 年 11 月 10 日

有人在新的更大尺寸的三星手机上测试过这些代码提示吗？

Yama

# 2012 年 11 月 28 日

谢谢大家，对于那些想在 JavaScript 中使用它的人
if (window.matchMedia(‘only screen and (device-width: 768px)’).matches)
{
// iPad……可能运行一些与小屏幕相关的 DOM 脚本？
}

if (window.matchMedia(‘only screen and (max-width: 480px)’).matches)
{
// 智能手机/iPhone……可能运行一些与小屏幕相关的 DOM 脚本？
}

Aamir Afridi

评论永久链接# 2013 年 4 月 23 日

哇，我以前不知道这个。这些东西太棒了。感谢分享；)

Heiner

# 2012 年 11 月 28 日

完美。为我节省了项目上线前不久的许多麻烦！

Steve Marx

# 2012 年 12 月 14 日

Safari 已经在 Windows 上停止维护，并且远程检查功能仅在 6.0 及更高版本中可用（Windows 上不可用）。

Rahsaan

# 2012 年 12 月 29 日

有什么想法如何在 iPad 上设计 div.scroll 以显示滚动条。目前此 CSS 技巧适用于双指滚动，这对我来说没问题。我真的很想让滚动条在 iPad 上可见，以便用户知道有内容需要滚动浏览？任何帮助都将非常棒！

Rams

# 2013年4月7日

奇怪的是，这对我完全不起作用。

继续挖掘，找到了一种可行的方法，希望对其他人有所帮助。

@media screen and (max-width:480px) { /* 为智能手机用户将标题设置为红色 */ h1 { color: red; } }


@media screen and (min-width:481px) and (max-width:1280px) {
/* 将标题设置为黑色，目标用户为PC用户 */
h1 {
color:green;

}

}

@media screen and (min-width:1281px) { /* 为智能手机用户将标题设置为红色 */ h1 { color: black; } }

Aamir Afridi

# 2013年4月23日

感谢快速简单的解决方案 :)
解决了我的问题。

Poonam jaiswal

# 2013年5月1日

为什么设备宽度为 768？为什么不等于 1024？

Guillermo

# 2013年12月9日

抱歉，伙计们，但这毫无意义！

有很多设备使用 480px 或 1024px，因此此 CSS 会影响所有设备，而不仅仅是 iPad 设备。

Erasmussen

评论永久链接# 2014年1月10日

我完全同意你的观点。
您如何看待 php 设备检测并在 body 类中添加 isTablet / isMobile / isIpad … 并应用如下 CSS 样式

// 我使用嵌套 CSS 规则与 compass
body.isIpad{ // 您在此处添加 iPad 特定规则 @media only screen and (orientation : landscape) { // 您在此处添加横屏 iPad 特定规则 } @media only screen and (orientation : portait) { // 您在此处添加竖屏 iPad 特定规则 }
 }
Ramses

评论永久链接# 2014年1月10日

Erasmussen，这是否开箱即用？并且适用于所有 iPad 设备？我相信您可以为您的代码添加更多具体的细节。例如，iPad 2 和 iPad Retina 在寻址方面的区别。

如果您知道，我个人将不胜感激一个完全可用的代码，以便我从中学习，因为我很难弄清楚响应性。谢谢。

Erasmussen

# 2014年1月12日

Ramses，

对于设备检测，我使用的是这个 php 类：http://mobiledetect.net/ 非常简单且完整。您可以检测移动设备、平板电脑设备以及设备类型：Blackberry、Samsung、Asus 或 …iPad。

我让您查看文档。我的 html 代码如下

<?php 
require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;

    // Test if current device is iPad
$isiPad = ($detect->isiPad()) ? "isiPad" : "";
?>

<!-- Add class isiPad if iPad device detected or "" if not -->
<body class="<?php echo $isiPad;  ?>">....

然后在 css 中，您可以使用我之前发送的代码并添加此处提供的 css-tricks：https://css-tricks.org.cn/snippets/css/retina-display-media-query/

//  /!\ Be careful here is SCSS code, no CSS. CSS compilation is necessary /!\

body.isIpad{
    // Your iPad specific rules here

    @media only screen and (orientation : landscape) {
        // Your landscape iPad specific rules here
    }

    @media only screen and (orientation : portait) {
        //Your portait iPad specific rules here
    }

    // Retina specific rules 
    //(please to you refer to css-tricks link for details)
    @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

        @media only screen and (orientation : landscape) {
            // Your landscape Retina specific rules here
        }

        @media only screen and (orientation : portait) {
            //Your portait Retina specific rules here
        }
    }
}

这可能不是最好的方法……但对我来说效果很好。

fjpoblam

# 2014年4月2日

当“视网膜”显示屏问世时，我决定停止对像素计数的纠结，并尝试使用设备纵横比。我对 iPad 使用 3/4（或 4/3，取决于情况），并且……到目前为止……对我的 iPhone 使用 40/71（！）

[email protected]

# 2014年9月12日

你好，
因为我们正在为媒体屏幕定义它，
我们能否也为字体大小定义页面布局。
比如我想在 iPad 上查看我的页面设计输出，但是当我增加或减少字体大小时，布局不能以正确的方式显示内容的流程，
是否有任何解决方案，我们可以为字体大小定义；
例如 -
@ media screen if font size: 10 – 50%
页面将显示为..

Peachy

# 2014年12月14日

大家好，
我不太懂编码，但我正在尝试在移动用户代理查看时删除 html 中包含的许多 css，我的网站在 wordpress 上运行，并且我为移动访客安装了 wptouch 插件，此插件停用了主题中安装的大多数其他插件的效果（我不介意）。问题是我仍然可以看到所有这些插件的 css 加载（对设计没有影响），这会减慢移动设备上的页面加载速度。如果用户代理是移动设备，是否有方法避免它们加载？

Peachy

# 2014年12月14日

附注：除非您为专业版付费，否则 wptouch 团队的支持很糟糕。

Maciek Rek

# 2015年11月28日

我认为随着 iPad Pro 的出现，我们可能需要一些更巧妙的东西。

Aaron Hall

评论永久链接# 2016年7月27日

没有运气。我什么也没找到。我不确定 CSS-Tricks 是否找到了 iPad Pro 横向模式的任何解决方案……。

ian

# 2016年4月1日

嗨，
我有一个正在运行的网站，在我的 ipad3 和 iphone6 上运行良好。
我还有一个 ipad 1，但无论我编辑或使用什么代码，它总是只会显示与 iphone6 相同的内容。
如果我将其旋转到纵向，屏幕甚至不会旋转。
我的主要目标是让 ipad1 横向视图在屏幕上显示与 ipad 3 相同的内容，而不是像 iphone。
任何帮助都将不胜感激。

Jenge

# 2016年10月4日

如果 Ipad 的纵向宽度为 768，横向宽度为 1024，为什么 min-width 设置为 481？这是否涵盖了其他平板电脑，或者我是否遗漏了什么非常明显的东西？

Buckster

# 2016年10月5日

我在 iPad 横向模式下遇到了一个问题，导致图像缩放，在纵向模式下工作相对正常。我使用了 @SirKay 的 CSS 代码片段的派生版本（感谢您提供起点）如下；

@media only screen and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 1)
{
#”页面或部分标识符” {
background:url(“图像 url”) no-repeat top center; background-size:cover;
}
}

问题是 iOS 在横向模式下存在一个与“固定”或“绝对”图像位置语句冲突的错误，尽管该错误在纵向模式下不存在，但它确实引入了“垂直重复”图像语句，以停止由于缩放而导致的额外空白，我正在尝试允许在缩放中进行额外的放大以查看是否可以解决此问题。

删除位置语句的唯一问题是它在滚动期间会在图像上方引入额外的空白，我正在探索现在可以克服此问题的代码，目前这是一个滚动问题。另一种选择是使用“display;none”参数，在较小的屏幕上有时更可取，以避免用户过度滚动，当然是以牺牲美观性为代价。

关于最小宽度“768px”的问题，iOS 始终将其用作设备宽度，而不是“1024px”，而是依靠“Orientation”语句来评估它应该对 CSS 执行的操作。

immercode

# 2018年7月9日

我发现这些媒体查询中的样式也适用于 iPhone X

Bost

# 2022年7月14日

宽度与设备宽度？它们不是一样吗？

评论

发表评论 取消回复

发表评论取消回复