определить область просмотра браузера с помощью JavaScript - PullRequest
Новая
       9

определить область просмотра браузера с помощью JavaScript

1 голос
/ 27 марта 2012

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

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 МБ его ????Ну, это может быть не очень хорошая идея.

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

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

1 Ответ

1 голос
/ 27 марта 2012

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 и, возможно, отрывочной совместимости. Вот хороший урок.

...