Как вызвать другую страницу 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

Да, но большая часть содержимого выглядит странно. Итак, определенно мне нужно вызвать другую страницу html. –

Об этом отвечен раньше на SO: http://stackoverflow.com/questions/11848422/change-site-completely-if-browser-size-is-small – Brian

в сторону примечание: я согласен с комментариями Брайана Беннета.

Итак, как я могу найти размер видового экрана для планшета и на основе размера видового экрана

Есть много способов сделать это, но нет никакого официального способа. Мое предложение - посмотреть размеры, используемые для дисплеев 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

источник

2014-10-16 12:55:42