使用 Js 更改 ipad 的样式表?

发布于 2024-12-29 12:33:43 字数 822 浏览 2 评论 0原文

目前,我已将样式应用于我的网站,这些样式在调整屏幕大小或使用 iPhone 使用 CSS 媒体查询访问网站时生效。 http://iamcreative.me

媒体查询

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 320px) and (orientation:portrait)" href="css/iphone.css" />

我发现的问题是,一旦我创建ipad 720px 纵向视图的样式表,这会影响我为 iphone 创建的一些样式!

我认为这是因为iPhone现在的屏幕分辨率为940px。

这就是我想到的,并想知道这是否是解决我的问题的最佳方法?

我创建了函数:

<script type="text/javascript">
function isiPad() {
    return navigator.userAgent.match(/iPad/i); 
}
</script>

然后在页面中添加:

if (isiPad()) { 
document.styleSheets[0].href="ipad.css";
}
else
{
document.styleSheets[0].href="everything-else.css";
}

I currently have styles applied to my site that take effect when the screen is resized or when it's visited with an iphone, using CSS media queries. http://iamcreative.me

The media-query

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 320px) and (orientation:portrait)" href="css/iphone.css" />

The problem I found was that once I created a stylesheet for an ipad's 720px portrait view, this would affect some of the styles that I created for the iphone!

I think this is because the iphone now has a screen resolution of 940px.

So this is what I came up with and wondered if this is the best way of getting round my problem?

I create the function:

<script type="text/javascript">
function isiPad() {
    return navigator.userAgent.match(/iPad/i); 
}
</script>

Then in the page I add:

if (isiPad()) { 
document.styleSheets[0].href="ipad.css";
}
else
{
document.styleSheets[0].href="everything-else.css";
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

不必你懂 2025-01-05 12:33:43

您正在寻找的是浏览器窗口的视口大小,这是我发现的一篇好文章,其中提供了您正在寻找的解决方案。

iPad/iPhone 视口设置

What you are looking for is the viewport size of the browser window, here is a good article I found that has solutions on what you are looking for.

iPad/iPhone viewport settings

凉薄对峙 2025-01-05 12:33:43

您可以使用 CSS Screen 查询: http://www.w3.org/TR/css3-mediaqueries / 为不同的设备定义不同的样式。

You can use CSS Screen queries: http://www.w3.org/TR/css3-mediaqueries/ to define different styles for different devices.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文