视口大小更改时如何调用不同的html页面？

Question

我正在开发响应式网站，该网站将同时显示在移动设备和平板电脑上。 如果移动设备和平板电脑的内容/设计相同，我可以使用媒体查询来更改基于视口的 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 进行移动响应式设计。 但是，我的内容与平板电脑略有不同。

那么，我怎样才能找到平板电脑的视口大小，根据视口大小，我需要调用平板电脑设计页面 - index_tab.html

有可能吗？

Answer 1

旁注：我同意 Brian Bennet cmets。

那么，我怎样才能找到平板电脑的视口大小？ 视口大小

有很多方法可以做到，但没有官方的方法。我的建议是查看用于显示 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。但是Moviles检测到了。没有区分平板电脑。

我需要调用平板设计页面 - index_tab.html

有可能吗？

是的，使用 Javascript：

<script>
   // put isTable() here.

   // change here 'the tablet condition'
   if(isTablet()) {
        window.navigate('index_tab.html');
   } 
</script>

相关帖子：

Detecting a mobile browser

JavaScript how to check User Agent for Mobile/Tablet

Detect different device platforms using CSS