我正在开发响应式网站,该网站将在移动设备和平板电脑上显示。 如果移动设备和平板电脑的内容/设计相同,我可以使用媒体查询根据视口(viewport)更改 css 文件,如下所示。
<link rel="stylesheet" type="text/css" media="screen and (max-width: 640px)" href="css/devices/screen/layout-modify1.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 641px) and (max-width: 800px)" href="css/devices/screen/layout-modify2.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 801px) and (max-width: 1024px)" href="css/devices/screen/layout-modify3.css">
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1025px)" href="css/devices/screen/layout-modify4.css">
默认情况下,我使用 index_mob.html
进行移动响应式设计。
但是,我的内容对于平板电脑略有不同。
那么,如何找到平板电脑的视口(viewport)尺寸,并根据视口(viewport)尺寸,我需要调用平板电脑设计页面 - index_tab.html
可能吗?
最佳答案
旁注:我同意 Brian Bennet 的评论。
So, how can I find the viewport size for tablet and based on the viewport size
有很多方法可以做到这一点,但没有官方的方法。我的建议是查看用于显示 bootstram 'sm' 和 'md' 的尺寸。还要检查它是否支持触摸屏。
自定义方式:
// detects touch
function isTablet() {
if (('ontouchstart' in window) || // FF, Chrome, Safari
(navigator.maxTouchPoints > 0) || // >= IE 10
(navigator.msMaxTouchPoints > 0)) {
// tablet orientation portrait or landscape
if (window.innerWidth < window.innerHeight) {
// Bootstrap sizes for sm/md
return (window.innerWidth > 767 && window.innerWidth < 993);
} else {
return (window.innerHeight > 767 && window.innerHeight < 993);
}
}
return false;
}
另一种方法是使用 Modernizr或http://detectmobilebrowsers.com 。但莫维莱斯发现了。没有区分平板电脑。
I need to call tablet design page - index_tab.html
Is it possible?
是的,使用 JavaScript:
<script>
// put isTable() here.
// change here 'the tablet condition'
if(isTablet()) {
window.navigate('index_tab.html');
}
</script>
相关帖子:
关于javascript - 当视口(viewport)大小改变时如何调用不同的html页面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26404812/