Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail


Ответ
 
Опции темы
Старый 09.06.2016, 18:28   #1
AlexKain
Пользователь
 
Регистрация: 25.09.2015
Сообщений: 46
По умолчанию Неправильно определяется ширина окна браузера

Код HTML:
<!doctype html>
<html>
<head>
<title>Баг</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style>
* {
padding: 0;
margin: 0;	
}
body {
	font-size: 10px;
}
#slider{
	background: #0c0;
	width: 100%;
	overflow: hidden;
}
#slider ul{
	height: 27.5em; 
}
#slider ul::after{
	content: ".";
	height: 0;
	display: block;
	clear: both;
	visibility: hidden;
}
#slider li{
	float: left;
}
#slider img{
	/* width: 100%; */
	width: 700px;
	height: 27.5em; 	
	display: block;
}
</style>
</head>
<body>
<div id="slider">
	<ul>
		<li><img src="gray.gif"></li>
		<li><img src="gray.gif"></li>
		<li><img src="gray.gif"></li>
		<li><img src="gray.gif"></li>
	</ul>
</div>

<div id="resolution" style="font-size: 20px; position: fixed; top: 40%; color: #000000;"></div>

<script>
var slider = document.getElementById('slider');
var toSee = document.getElementById('resolution');
var ul = slider.querySelector('ul');
//ul.style.width = '2698px';
toSee.innerHTML = document.documentElement.clientWidth;
</script>
</body>
</html>
Есть довольно странная проблема. Делал горизонтальный слайдер, главное условие которого - слайд должен быть на весь экран при разных разрешениях. Решил сделать это следующим способом - картинки помещены в список, тот - в div с overflow:hidden. JS определяет ширину экрана(окна браузера), присваивает это значение ширине каждой картинки (по умолчнию она равна 100%), после чего задает ширину ul равной данной ширине умноженной на количество слайдов. Вот здесь и появляется проблема: разрешение экрана 1280х1024, но ширина экрана определяется равной 1263. Черт бы с ним, но после присваивание width для ul ширина становится нормальной, в то время как слайды равны 1263, и, соответственно, на экране проглядывает следующая картинка. Методом тыка установил, что ширина меняется на нормальную при ul width >= 2698px. Пиксель меньше - и первоначальная ширина определяется нормально - 1280px. Если не менять размер ul, а вместо 4 взять 3 картинки - тоже все определяется правильно. И еще один симптом - если четырем картинкам установить ширину, достаточную чтобы на одной "строке" хватало бы места хотя бы двум (при неизменном ul) - т.е. ширина слайда меньше половины экрана (напр., 600px), то снова все в норме. Но если на одном уровне помещается только одна (напр., ширина 700px - в примере именно так), то первоначально определяет размер экрана снова как 1963px. Проверял в фоксе и хроме. Почему так странно работает и как с этим бороться?
Изображения
Тип файла: jpg gray.jpg (23.0 Кб, 131 просмотров)
AlexKain вне форума Ответить с цитированием
Старый 09.06.2016, 18:46   #2
pompiduskus
юзер как все
Участник клуба
 
Аватар для pompiduskus
 
Регистрация: 10.01.2012
Сообщений: 1,577
По умолчанию

Скорее всего дело вот в чем.

PHP код:

console
.logwindow.screen );


    
availWidth1023
    
availHeight713
    
width1024
    
height768
    
colorDepth24
    
pixelDepth24
    
top0
    
left0
    
availTop27
    
availLeft
}

// В то время как "clientWidth" показывает доступную на этот момент ширину.
// Если окно браузера у меня на половину экрана, то так он и будет показыть
document.documentElement.clientWidth// 564px

// А вот если вызвать 
window.screen.width// 1024px 
<Дзен - Вся вселенная в тебе > | Резюме: https://ch3ll0v3k.github.io/CV/
pompiduskus вне форума Ответить с цитированием
Старый 09.06.2016, 22:59   #3
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

меряй ширину и высоту окна средствами CSS и будет тебе счастье.
гугли: vh, vw;
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 10.06.2016, 18:09   #4
AlexKain
Пользователь
 
Регистрация: 25.09.2015
Сообщений: 46
По умолчанию

Naive, я про них знаю вот только многие более-менее старые браузеры их не поддерживают, а согласно https://webref.ru/css/value/size, Opera Mobile не поддерживает вообще. Так что пользуюсь тем, что есть.

pompiduskus, вроде работает, спасибо. Но только при развернутом на всю ширину окне. А если у пользователя окно браузера, скажем, на половину экрана? Видимо, это я выразился в описании проблемы не совсем правильно. Картинки должны быть во всю ширину не экрана монитора, а окна браузера. Если комбинировать window.screen.width и document.documentElement.clientWidt h в зависимости от ситуации - то как осуществить этот выбор практически - не представляю. Ставить clientWidth, если он меньше screen.width не катит - из-за 1263 будет меньше даже в полноэкранном режиме. И еще - в чем изначальная причина данной проблемы? Просто считаю, что установление этого поможет ее решить

Последний раз редактировалось AlexKain; 10.06.2016 в 18:28.
AlexKain вне форума Ответить с цитированием
Старый 10.06.2016, 18:33   #5
AlexKain
Пользователь
 
Регистрация: 25.09.2015
Сообщений: 46
По умолчанию

И да, небольшой косяк в описании:
Цитата:
"Пиксель меньше - и первоначальная ширина определяется нормально - 1280px."
На самом деле пиксель меньше - и по прежнему 1263, а вот пиксель больше - и уже 1280

Последний раз редактировалось AlexKain; 10.06.2016 в 18:43.
AlexKain вне форума Ответить с цитированием
Старый 10.06.2016, 19:12   #6
AlexKain
Пользователь
 
Регистрация: 25.09.2015
Сообщений: 46
По умолчанию

pompiduskus, попробовал по вашему совету использовать window, только свойство window.innerWidth - тогда показывает вроде все правильно при разных размерах окна. Хотя по поводу этого свойства на developer.mozilla.org сказано - "From Firefox 4 to 24, this property was buggy and could give a wrong value before page load on certain circumstances", так что как решить проблему кроссбраузерно, не знаю.
Еще одно наблюдение - непонятная разница в размерах всегда равна 17px. Именно такую ширину имеет полоса прокрутки. Может это как-то поможет понять суть проблемы. Хотя при изменение ШИРИНЫ вертикальная полоса прокрутки исчезать-появляться не должна...

Последний раз редактировалось AlexKain; 10.06.2016 в 19:20.
AlexKain вне форума Ответить с цитированием
Старый 10.06.2016, 21:55   #7
pompiduskus
юзер как все
Участник клуба
 
Аватар для pompiduskus
 
Регистрация: 10.01.2012
Сообщений: 1,577
По умолчанию

Приходится крутиться

Даже полоса прокрути МОЖЕТ иметь разные размеры у вех барузеров.
<Дзен - Вся вселенная в тебе > | Резюме: https://ch3ll0v3k.github.io/CV/
pompiduskus вне форума Ответить с цитированием
Старый 11.06.2016, 00:06   #8
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

4 - 24 версия ФФ тебя волнует? Ты блин серьезно!?
Как насчет второй версии Интернет Эксплорера? Или первой версии Навигатора?
vh&vw начинается поддерживаться с 9 версии ИЕ. Оперу мини уже давно никто нахрен не юзает (ну да, есть капитаны старой закалки, которые со своей оперы мини выходят только на 5-10 сайтов, на которые ходят последние 10 лет). Что уж говорить про ИЕ 8 и ниже...
Кста, ты уверен, что ВЕСЬ остальной JS будет работать у тебя в ИЕ8,7,6 и миниОпере?

Ты борешься за поддержку работоспособности своего продукта у 0,5% пользователей. Ты уверен, что это будет хотябы 1 человек? Человек в смысле пользователь, а не дебил-перфекционист, который проверяет все интересные ему сайты во всех браузерах, начиная с первой текстовой версии конкъерора?..
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 11.06.2016, 18:13   #9
AlexKain
Пользователь
 
Регистрация: 25.09.2015
Сообщений: 46
По умолчанию

Naive, практически может и ненужно. Вот только если ты фрилансер-удаленник, то это может послужить причиной невыплаты денег даже при "безопасной сделке" - т.е. с посредниками. Заказчик может сказать: "В задании четко сказано: "кроссбраузерно", так что сайт должен поддерживать пусть не все версии браузеров, но хотя бы все виды. А он Opera mobile не тянет. Фигню сделал". Проще говоря, это повод доколупаться. И еще, может вы живете каком-нибудь мегаполисе, вот только в городах с числом населения не превышающим 100-120 К , я видел многих, сидящих в телефоне с этой самой Оперой. Технари может и нет, а вот все эти мед., пед. и прочие - очень даже, и все они потенциальные пользователи создаваемого сайта.
Ну ладно, обходной вариант решения вроде готов. Но есть какие-нибудь идеи причины возникновения проблемы с этими 17px? Вопрос не праздный, мало ли где источник этого бага может вылезти

Последний раз редактировалось AlexKain; 11.06.2016 в 18:17.
AlexKain вне форума Ответить с цитированием
Ответ

Здесь нужно купить рекламу за 20 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru
Без учёта ботов - 20000 человек в день, 350000 в месяц.

Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Неправильно определяется отступ слева justfor JavaScript, Ajax 2 25.02.2015 11:37
Сайт по центру окна браузера imbamarik HTML и CSS 1 31.03.2011 02:24
Получить разрешение открытого окна браузера Kasper1 JavaScript, Ajax 8 24.02.2011 01:00
Как закрепить картинку относительно окна браузера? Svetix HTML и CSS 18 18.04.2009 23:12
Неправильно отрисовывается клиентская часть окна 2XYSFJ Общие вопросы C/C++ 1 16.10.2008 12:18