обнаружить окно просмотра браузера с помощью javascript

Question

В настоящее время я использую jQuery для загрузки переменной php layout в зависимости от ширины браузера.

function setLocation(url) { 
    if (window.location.href.indexOf(url) === -1) 
     window.location = url; 
} 

function reloadPage(width) { 
    width = parseInt(width); 
    if (width < 701) { 
     setLocation("layout700.php"); 
    } else if (width < 900) { 
     setLocation("layout900.php"); 
    } else { 
     setLocation("layout1200.php"); 
    } 
} 

$(function() { 
    reloadPage($(this).width()); 
    $(window).resize(function() { 
     reloadPage($(this).width()); 
    }); 
}); 

Мои вопросы:

Q1. Можно ли это сделать только с помощью php? Если да, то как?

Q2. Могу ли я сделать это с помощью PLAIN JAVASCRIPT (Нет jQuery, MooTools или других библиотек) Если да, то как?

Я не хочу использовать эти библиотеки, потому что это единственная функция javascript в моем шаблоне и в настоящее время только для этого. Я загружаю всю библиотеку jQuery. Пожалуйста помоги.

Почему я хочу сделать это, когда я могу просто перестроить свой макет с помощью CSS?

Я не хочу использовать свойство CSS #div { display:none }, так как проблема заключается в том, что в моих макетах загружено очень много изображений и виджетов.

Я даже попробовал отзывчивый макет, но, к сожалению, некоторые детали изображения едва заметны на небольших экранах.

Использование свойства css display:none будет по-прежнему загружать неотображаемый контент, тратящий много трафика. Скажем, для мобильного браузера загрузить 1,5 МБ сайта, а затем скрыть 1,2 МБ ???? Ну, это может быть не очень хорошая идея.

Для небольших браузеров эти виджеты не будут иметь никакого смысла, поэтому я хотел бы загрузить более легкую версию.

Это то, что я думаю. Пожалуйста, не стесняйтесь исправить меня, если я ошибаюсь, поскольку я все еще новичок, когда дело доходит до программирования и до сих пор находится на стадии обучения.

Answer 1

Q1. Можно ли это сделать только с помощью php? Если да, то как?

В определенной степени вы можете идентифицировать мобильные устройства. Тем не менее, разрешение экрана пользователя недоступно в PHP.

Q2. Могу ли я сделать это с помощью PLAIN JAVASCRIPT (Нет jQuery, MooTools или других библиотек) Если да, то как?

Да. На самом деле это может быть даже проще. Вот эквивалент вашего кода без jQuery:

function setLocation(url) { 
    if (window.location.href.indexOf(url) === -1) 
     window.location = url; 
} 

function reloadPage(width) { 
    if (width < 701) { 
     setLocation("layout700.php"); 
    } else if (width < 900) { 
     setLocation("layout900.php"); 
    } else { 
     setLocation("layout1200.php"); 
    } 
} 

var done = false; 

function ready() { 
    if(!done) { 
     done = true; 
     reloadPage(document.width); 
    } 
} 

if(window.addEventListener) { 
    window.addEventListener('DOMContentLoaded', ready, false); 
    window.addEventListener('load', ready, false); 
} else if(window.attachEvent) { 
    window.attachEvent('onload', ready); 
} 

window.onresize = function() { 
    reloadPage(document.width); 
}; 

Однако! Вы также можете использовать медиа-запросы, чтобы восстановить свою страницу, не делая жидкую раскладку. Это лучше по многим причинам, особенно в том, что ваш макет не будет зависеть от JavaScript и, возможно, отрывочной совместимости. Here's a good tutorial.