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

我正在开发适用于手机和平板电脑的响应式网站。如果移动设备和平板电脑的内容/设计相同，我可以使用媒体查询根据下面的视口更改css文件。如何在视口大小更改时调用不同的html页面？

<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

这可能吗？

来源

2014-10-16 UI_Dev

你为什么不只是使用类更改要显示/隐藏的内容的显示值？这样，你只有一个HTML页面来管理。 – Brian 2014-10-16 12:49:53

是的，但大部分内容看起来很奇怪。所以，我肯定需要调用另一个html页面。 – 2014-10-16 12:53:54

这已经在SO上回答了：http://stackoverflow.com/questions/11848422/change-site-completely-if-browser-size-is-small – Brian 2014-10-16 12:55:40

撇开笔记：我同意Brian Bennet的评论。

所以，我怎么能找到平板电脑的视口大小以及基于视口大小

有很多方法可以做到这一点，但目前还没有正式的办法。我的建议是查看用于显示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>

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

回答

相关问题