Форум Сайтостроение Веб-строительство

Определение разрешение экрана на js

Unlock
На сайте с 01.08.2004
Offline
757
Unlock
922

Коллеги, помогите пожалуйста.

Есть вот такой код: 

<script type="text/javascript">

function getTopOffset(e) { 

	var y = 0;

	do { y += e.offsetTop; } while (e = e.offsetParent);

	return y;

}

var block = document.getElementById('fixblock'); /* fixblock - значение атрибута id блока */

if ( null != block ) {

	var topPos = getTopOffset( block );

	window.onscroll = function() {

                if ( $(window).width() > 800 ) {  // проверка ширины экрана

			var newcss = (topPos < window.pageYOffset) ? 

				'top:20px; position: fixed; width: 250px;' : 'position:static;';

			block.setAttribute( 'style', newcss );

		}

	}

}

</script>

Тут смысл в том, чтобы на планшетах, где разрешение по ширине меньше 800, div не должен быть fixed. Но что-то нифига это не работает.

Что-то не верно в этой строчке: if ( $(window).width() > 800 )

Есть желание, - тысяча способов; нет желания, - тысяча поводов! /Петр-I/.
дани мапов
На сайте с 06.09.2012
Offline
204
дани мапов
#1

В мозилле и хроме работает. На андроиде тоже самое.

Написание и доработка скриптов (PHP, MySQL, JavaScript, jQuery) (/ru/forum/811046)
Unlock
На сайте с 01.08.2004
Offline
757
Unlock
#2

У меня почему то не работает. Там реклама вот так размещается:

<div id="fixblock">

<!-- тут должен быть ваш код рекламы -->

</div>

Проверял на планшетах, с разрешением 1200x800, все равно div получается с position:fixed. Если бы условие срабатывало, то этого не должно быть. Что удивляет, так это на смартфоне срабатывает, а на планшетах нет. Где я не так что-то сделал?

T
На сайте с 09.05.2015
Offline
0
TRos
#3

Скорее всего проблема в том, что на матрицах планшетов пиксели нестандартного размера. Я когда верстал адаптивный дизайн для своего сайта тоже сталкивался с похожим косяком. Нужно в header добавить такой МЕТА-тег:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Попробуйте - должно помочь :)

дани мапов
На сайте с 06.09.2012
Offline
204
дани мапов
#4
Unlock:
Проверял на планшетах, с разрешением 1200x800, все равно div получается с position:fixed. Если бы условие срабатывало, то этого не должно быть.

Ну с разрешением 1200x800 и должно быть position:fixed, все правильно работает.

Unlock
На сайте с 01.08.2004
Offline
757
Unlock
#5

Почему должно быть? Ведь условие: если больше 800? Не больше или равно, а больше... Я пробовал ставить 801, не помогает.

дани мапов
На сайте с 06.09.2012
Offline
204
дани мапов
#6
Unlock:
Почему должно быть? Ведь условие: если больше 800? Не больше или равно, а больше... Я пробовал ставить 801, не помогает.

1200 - ширина.

nocomments
На сайте с 12.11.2009
Offline
176
nocomments
#7

Захожу с планшета с разрешением экрана 2560 на сайт mydevice.io и вижу там 1280px ширина и pixel-ratio=2. Вот какая загвоздка есть. Следует ли учитывать рейтио непонятно, ведь визуально браузер работает как будто ширина 1280.

Это счастливая рефка: {жать сюда} (http://bit.ly/WbMR4O) тому, кто по ней разместит больше всего статей, будет сопутствовать счастье всю его оставшуюся, длинную, обеспеченную жизнь.
AM
На сайте с 27.04.2015
Offline
0
Alex-M-S
#8

Возможно, в данном случае удобней использовать css3 media запрос. Можно в правилах учесть как ширину так и плотность пикселов.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий