|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
09.06.2016, 17:28 | #1 |
Пользователь
Регистрация: 25.09.2015
Сообщений: 50
|
Неправильно определяется ширина окна браузера
Код 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> |
09.06.2016, 17:46 | #2 |
юзер как все
Участник клуба
Регистрация: 10.01.2012
Сообщений: 1,586
|
Скорее всего дело вот в чем.
PHP код:
<Дзен - Вся вселенная в тебе > | Резюме: https://ch3ll0v3k.github.io/CV/
|
09.06.2016, 21:59 | #3 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
меряй ширину и высоту окна средствами CSS и будет тебе счастье.
гугли: vh, vw;
Alar, верни репу!
|
10.06.2016, 17:09 | #4 |
Пользователь
Регистрация: 25.09.2015
Сообщений: 50
|
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 в 17:28. |
10.06.2016, 17:33 | #5 | |
Пользователь
Регистрация: 25.09.2015
Сообщений: 50
|
И да, небольшой косяк в описании:
Цитата:
Последний раз редактировалось AlexKain; 10.06.2016 в 17:43. |
|
10.06.2016, 18:12 | #6 |
Пользователь
Регистрация: 25.09.2015
Сообщений: 50
|
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 в 18:20. |
10.06.2016, 20:55 | #7 |
юзер как все
Участник клуба
Регистрация: 10.01.2012
Сообщений: 1,586
|
Приходится крутиться
Даже полоса прокрути МОЖЕТ иметь разные размеры у вех барузеров.
<Дзен - Вся вселенная в тебе > | Резюме: https://ch3ll0v3k.github.io/CV/
|
10.06.2016, 23:06 | #8 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
4 - 24 версия ФФ тебя волнует? Ты блин серьезно!?
Как насчет второй версии Интернет Эксплорера? Или первой версии Навигатора? vh&vw начинается поддерживаться с 9 версии ИЕ. Оперу мини уже давно никто нахрен не юзает (ну да, есть капитаны старой закалки, которые со своей оперы мини выходят только на 5-10 сайтов, на которые ходят последние 10 лет). Что уж говорить про ИЕ 8 и ниже... Кста, ты уверен, что ВЕСЬ остальной JS будет работать у тебя в ИЕ8,7,6 и миниОпере? Ты борешься за поддержку работоспособности своего продукта у 0,5% пользователей. Ты уверен, что это будет хотябы 1 человек? Человек в смысле пользователь, а не дебил-перфекционист, который проверяет все интересные ему сайты во всех браузерах, начиная с первой текстовой версии конкъерора?..
Alar, верни репу!
|
11.06.2016, 17:13 | #9 |
Пользователь
Регистрация: 25.09.2015
Сообщений: 50
|
Naive, практически может и ненужно. Вот только если ты фрилансер-удаленник, то это может послужить причиной невыплаты денег даже при "безопасной сделке" - т.е. с посредниками. Заказчик может сказать: "В задании четко сказано: "кроссбраузерно", так что сайт должен поддерживать пусть не все версии браузеров, но хотя бы все виды. А он Opera mobile не тянет. Фигню сделал". Проще говоря, это повод доколупаться. И еще, может вы живете каком-нибудь мегаполисе, вот только в городах с числом населения не превышающим 100-120 К , я видел многих, сидящих в телефоне с этой самой Оперой. Технари может и нет, а вот все эти мед., пед. и прочие - очень даже, и все они потенциальные пользователи создаваемого сайта.
Ну ладно, обходной вариант решения вроде готов. Но есть какие-нибудь идеи причины возникновения проблемы с этими 17px? Вопрос не праздный, мало ли где источник этого бага может вылезти Последний раз редактировалось AlexKain; 11.06.2016 в 17:17. |
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Неправильно определяется отступ слева | justfor | JavaScript, Ajax | 2 | 25.02.2015 10:37 |
Сайт по центру окна браузера | imbamarik | HTML и CSS | 1 | 31.03.2011 02:24 |
Получить разрешение открытого окна браузера | Kasper1 | JavaScript, Ajax | 8 | 24.02.2011 00:00 |
Как закрепить картинку относительно окна браузера? | Svetix | HTML и CSS | 18 | 18.04.2009 23:12 |
Неправильно отрисовывается клиентская часть окна | 2XYSFJ | Общие вопросы C/C++ | 1 | 16.10.2008 12:18 |