使用 Js 更改 ipad 的样式表?
目前,我已将样式应用于我的网站,这些样式在调整屏幕大小或使用 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 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您正在寻找的是浏览器窗口的视口大小,这是我发现的一篇好文章,其中提供了您正在寻找的解决方案。
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
您可以使用 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.