Php ширина окна браузера

Обновлено: 22.01.2025

Мне нужно найти разрешение экрана экрана пользователей, которые посещают мой сайт?

вы не можете сделать это с чистым PHP. Вы должны сделать это с помощью JavaScript. О том, как это сделать, написано несколько статей.

по сути, вы можете установить cookie или даже сделать Ajax для отправки информации в php-скрипт. Если вы используете jQuery, вы можете сделать это примерно так:

jquery:

PHP (some_script.в PHP)

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

непосредственно с PHP невозможно, но.

Я пишу этот простой код для сохранения разрешения экрана в сеансе PHP для использования в галерее изображений.

это выведет заголовок меньшего размера, если экран 480px или меньше. Поэтому нет необходимости передавать любые vars с помощью JS или аналогичного.

вы можете попробовать RESS (адаптивный дизайн + серверные компоненты), см. Этот учебник:

Я не думаю, что вы можете определить размер экрана исключительно с помощью PHP, но вы можете обнаружить user-agent..

вот ссылка на более подробный скрипт: PHP Mobile Detect

единственный способ-использовать javascript, а затем получить javascript для публикации на вашем php (если вам действительно нужна серверная сторона res). Однако это полностью упадет на его лицо, если они отключат javascript.

Javascript: проверьте, есть ли высота и ширина печенье набор
Javascript: если установлен, проверьте, если экран.высота и экрана.ширина (или что вы хотите) соответствует текущему значению cookie
Javascript: если cookie не установлен или не соответствует текущему значению, то: a. Javascript: создайте постоянный или сеансовый cookie с именем (например) 'shw' для значения текущего экрана.высота и экрана.ширина.
b. Javascript: перенаправление на SELF с помощью окна.местоположение.перезаряжать.)( Когда он перезагружается, он пропустит Шаг 3.
в PHP: $_COOKIE ['shw'] содержит значения.
продолжить работу с PHP

например, Я использую некоторые общие функции cookie, найденные в интернете. Убедитесь, что setCookie возвращает правильные значения. Я поместите этот код сразу после тега head. Очевидно, что функция должна быть в исходном файле.

самый простой способ сделать это:

в PHP нет стандартного способа получить эту информацию. Однако это возможно, если вы используете стороннее решение. Детектор устройств 51Degrees для PHP имеет необходимые свойства:

дает вам ширину и высоту экрана пользователя в пикселях. Чтобы использовать эти свойства, необходимо загрузить детектор из sourceforge. Затем вам нужно включить следующие 2 строки в файл / файлы, где необходимо определить высоту и ширину экрана:

где path/to / core-путь к каталогу "Core", который вы загрузили из sourceforge. Наконец, чтобы использовать свойства:

имейте в виду, что эти переменные могут содержать "неизвестное" значение несколько раз, когда устройство не может быть идентифицирован.

решение: сделайте масштабируемый веб-дизайн . (наш я должен сказать правильный веб-дизайн) формирование должно быть сделано на стороне клиента, и я хотел бы, чтобы информация была передана на сервер, но информация по-прежнему полезна ( сколько объектов на строки типа сделки), но все же веб-дизайн должен быть текучим, таким образом, каждый элемент строки не должен быть помещен в таблицы, если его фактическая таблица ( и данные будут масштабироваться до отдельных ячеек) если вы используете div, вы можете окно должно "разбить" ряд в нужном месте. (просто нужен правильный css)

Мне нужно определить разрешение экрана пользователя, который посещает мой веб-сайт. Как это сделать?

Ответ 1

Вы не можете этого сделать с чистым PHP. Вы должны сделать это с помощью JavaScript. О том, как это сделать, написано множество статей.

По сути, вы можете установить cookie или даже использовать Ajax для отправки информации в PHP-скрипт. Если вы используете jQuery, вы можете сделать это примерно так:

jquery:

$(function()

$.post('some_script.php', < width: screen.width, height:screen.height >, function(json)

if(json.outcome == 'success')

// Возможн о чт о-либо сделать с этими значениями?

> else

alert('Невозможно определить в PHP разрешение экрана!');

>,'json');

>);

PHP (some_script.php)

<?php

// Например, вы можете сделать что-то вроде этого:

if(isset($_POST['width']) && isset($_POST['height']))

$_SESSION['screen_width'] = $_POST['width'];

$_SESSION['screen_height'] = $_POST['height'];

echo json_encode(array('outcome'=>'success'));

> else

echo json_encode(array('outcome'=>'error','error'=>"Couldn't save dimension info"));

Это действующий базовый код. Однако обычно разрешение экрана - это не то, что вам нужно. Возможно, вас больше интересует размер фактического окна просмотра браузера, поскольку именно там отображается страница .

Ответ 2

Ответ 3

Ответ 4

Я обнаружил, что использование CSS для моего html внутри моего php помогло мне.

<?php

echo '<h2 media="screen and (max-width: 480px)">';

echo 'My headline';

echo '</h2>';

echo '<h1 media="screen and (min-width: 481px)">';

echo 'My headline';

echo '</h1>';

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

Ответ 5

Это очень простой процесс. Да, вы не можете получить ширину и высоту в PHP. Однако JQuery может предоставить ширину и высоту экрана. Сначала перейдите на https://github.com/carhartl/jquery-cookie и получите jquery.cookie.js. Вот пример использования php для получения ширины и высоты экрана:

<!DOCTYPE html>

<head>

function setScreenHWCookie()

$.cookie('sw',screen.width);

$.cookie('sh',screen.height);

return true;

setScreenHWCookie();

</script>

</head>

<body>

<h1>Использование jquery.cookie.js для хранения высоты и ширины экрана</h1>

<?php

if(isset($_COOKIE['sw'])) < echo "Ширина экрана: ".$_COOKIE['sw']."<br/>";>

if(isset($_COOKIE['sh'])) < echo "Высота экрана: ".$_COOKIE['sh']."<br/>";>

</body>

</html>

Ответ 6

Полностью рабочий пример

Мне не удалось найти реальный рабочий пример PHP для (без параметров URL) возврата размера экрана клиента и других свойств на серверный PHP, поэтому я собрал этот пример.

JS заполняет и отправляет скрытую форму (написанную на PHP из массива свойств JS), POST передает ее самому себе (данные теперь доступны в PHP) и возвращает данные в виде таблицы.

(Проверено на нескольких браузерах.)

<!DOCTYPE html>

<html>

<head>

<title>*Client Info*</title>

</head>

<body>

<?php

$clientProps=array('screen.width','screen.height','window.innerWidth','window.innerHeight',

'window.outerWidth','window.outerHeight','screen.colorDepth','screen.pixelDepth');

if(! isset($_POST['screenheight']))

echo "Loading. <form method='POST' style='display:none'>";

foreach($clientProps as $p) < // создание скрытой формы

echo "<input type='text' .','',$p)."' name='".str_replace('.','',$p)."'>";

echo "<input type='submit'></form>";

echo "<script>";

foreach($clientProps as $p) < // заполнить скрытую форму информацией об экране/окне

echo "document.getElementById('" . str_replace('.','',$p) . "').value = $p;";

echo "document.forms.namedItem('data').submit();"; //отправка формы

echo "</script>";

> else

echo "<table>";

foreach($clientProps as $p) < // создать выходную таблицу

echo "<tr><td>".ucwords(str_replace('.',' ',$p)).":</td><td>".$_POST[str_replace('.','',$p)]."</td></tr>";

echo "</table>";

window.history.replaceState(null,null); // избежать предупреждения формы, если пользователь нажимает кнопку обновить

</script>

</body>

</html>

Возвращенные данные extract преобразованы в переменные. Например:

window.innerWidth возвращается в $windowinnerWidth

Мы будем очень благодарны

если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.

Представляю Вашему вниманию перевод небольшой заметки «How to Get the Screen, Window, and Web Page Sizes in JavaScript» автора Dmitri Pavlutin.

Для определения ориентации окна браузера (ландшафтной или портретной) можно сравнить его ширину и высоту.

Однако во всевозможных доступных размерах легко запутаться: существуют размеры экрана, окна, веб-страницы и т.д.

Что означают эти размеры и, главное, как их получить? Именно об этом я и собираюсь рассказать.

1. Экран

1.1. Размер экрана

Размер экрана — это ширина и высота всего экрана: монитора или мобильного дисплея.

Получить информацию о размере экрана можно с помощью свойства screen объекта window :

1.2. Доступный размер экрана

Доступный размер экрана — это ширина и высота активного экрана без панели инструментов операционной системы.

Для получения доступного размера экрана снова обращаемся к window.screen :

2. Окно

2.1. Размер внешнего окна (или внешний размер окна)

Размер внешнего окна — это ширина и высота текущего окна браузера, включая адресную строку, панель вкладок и другие панели браузера.

Получить информацию о размере внешнего окна можно с помощью свойств outerWidth и outerHeight объекта window :

2.2. Внутренний размер окна (или размер внутреннего окна)

Внутренний размер окна — это ширина и высота области просмотра (вьюпорта).

Объект window предоставляет свойства innerWidth и innerHeight :

Если мы хотим получить внутренний размер окна без полос прокрутки, то делаем следующее:

3. Размер веб-страницы

Размер веб-страницы — это ширина и высота отображаемого содержимого (отрендеренного контента).

Для получения размера веб-страницы используйте следующее (включает в себя внутренние отступы страницы, но не включает границы, внешние отступы и полосы прокрутки):

Если pageHeight больше, чем внутренняя высота окна, значит, присутствует вертикальная полоса прокрутки.

4. Заключение

Надеюсь, теперь Вы понимаете, как получать различные размеры.

Размер экрана — это размер монитора (или дисплея), а доступный размер экрана — это размер экрана без панелей инструментов ОС.

Внешний размер окна — это размер активного окна браузера (включая поисковую строку, панель вкладок, открытые боковые панели и проч.), а внутренний размер окна — это размер области просмотра.

как я могу получить windowWidth , windowHeight , pageWidth , pageHeight , screenWidth , screenHeight , pageX , pageY , screenX , screenY которая будет работать во всех основных браузерах?

Если вы используете jQuery, вы можете получить размер окна или документа с помощью методов jQuery:

для размера экрана вы можете использовать

Это все, что нужно знать:

вот кросс-браузерное решение с pure JavaScript (источник):

не-jQuery способ получить доступный размер экрана. window.screen.width/height уже был выставлен, но для отзывчивого веб-дизайна и полноты я думаю, что стоит упомянуть эти атрибуты:

availWidth и availHeight - доступные ширина и высота на экран (исключая панели задач ОС и тому подобное).

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

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

для этого использовать: window.innerWidth и window.innerHeight свойства (см. doc в w3schools).

в большинстве случаев это будет лучший способ, например, отобразить идеально центрированный плавающий модальный диалог. Это позволяет рассчитать позиции на окне, независимо от того, какое разрешение ориентации или размер окна использование браузера.

чтобы проверить высоту и ширину вашей текущей загруженной страницы любого веб-сайта, используя "консоль" или после нажатия "проверить".

Шаг 1: нажмите правую кнопку мыши и нажмите "Проверить", а затем нажмите "консоль"

Шаг 2: убедитесь, что ваш экран браузера не должен быть в режиме "максимизировать". Если экран браузера находится в режиме "развернуть", вам нужно сначала нажать кнопку развернуть (присутствует либо в правый или левый верхний угол) и увеличить его.

Шаг 3: теперь напишите следующее после знака больше, чем ( ' > ' ), т. е.

Если вам нужно поистине пуленепробиваемое решение для ширины и высоты документа ( pageWidth и pageHeight на картинке), вы можете рассмотреть возможность использования моего плагина,С помощью jQuery.documentSize.

он имеет только одну цель: всегда возвращать правильный размер документа, даже в сценариях, когда jQuery и другие методы не. Несмотря на свое название, вам не обязательно использовать jQuery – он написан на ванильном Javascript и строительство без jQuery тоже.

мировой document . Для других документов, например, во встроенном iframe, к которому у вас есть доступ, передайте документ как параметр:

Update: теперь для размеров окна тоже

никогда, начиная с версии 1.1.0, с помощью jQuery.documentSize также обрабатывает размеры окон.

это необходимо, потому что

$( window ).height() is багги в iOS, до такой степени, что бесполезно
$( window ).width() и $( window ).height() are ненадежный на мобильный потому что они не обрабатывают эффекты мобильного масштабирования.

С помощью jQuery.documentSize обеспечивает $.windowWidth() и $.windowHeight() , которые решают эти вопросы. Для получения дополнительной информации, пожалуйста, проверьте документация.

Я написал небольшой букмарклет javascript, который вы можете использовать для отображения размера. Вы можете легко добавить его в свой браузер, и всякий раз, когда вы нажмете на него, вы увидите размер в правом углу окна браузера.

закладка

Исходный Код

исходный код находится в кофе:

в основном код добавления небольшой div, который обновляется при изменении размера окна.

который представляет фактический размер оболочки.

иногда вам нужно видеть изменения ширины / высоты при изменении размера окна и внутреннего содержимого.

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

Он добавляет допустимый HTML с фиксированной позицией и высоким Z-индексом, но достаточно мал, поэтому вы можете:

на фактический сайт
использовать его для тестирование мобильные/отзывчивый вид

протестировано на: Chrome 40, IE11, но очень возможно работать и на других/старых браузерах . :)

EDIT: теперь стили применяются только к элементу таблицы logger-не ко всем таблицам-также это в jQuery-бесплатно решение :)

ниже приведен пример того, что он вернется:

у вас screenWidth переменной, просто использовать screen.width С screenHeight , вы просто используете screen.height .

чтобы получить ширину и высоту окна, это будет screen.availWidth или screen.availHeight соответственно.

на pageX и pageY переменные, использовать window.screenX or Y . Обратите внимание, что это СЛЕВА/СВЕРХУ Вашего левого/верхнего экрана. Итак, если у вас есть два экрана width 1920 тогда окно 500px слева от правого экрана будет иметь значение X 2420 (1920+500). screen.width/height , однако, отображать ширину или высоту текущего экрана.

чтобы получить ширину и высоту вашей страницы, Используйте jQuery $(window).height() или $(window).width() .

снова используя jQuery, используйте $("html").offset().top и $("html").offset().left для pageX и pageY значения.

теперь мы можем безопасно использовать только собственный javascript window api во всех браузерах, без контекста окна.

синтаксис немного понятно!

чтобы получить точные результаты в каждом браузере и устройстве, результаты должны быть умножены на devicePixelRatio.

вот мое решение. Сначала идет какой-то объект утилиты для работы с cookie

Читайте также: