Код 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. Перевіряв в Фокс і хромі. Чому так дивно працює і як з цим боротися?
pompiduskus 05.02.2017 о 01:32 постів Швидше за все справа ось у чому.
PHP код:
console.log (window.screen);
{
availWidth: 1023,
availHeight: 713,
width: 1024,
height: 768,
colorDepth: 24,
pixelDepth: 24,
top: 0,
left: 0,
availTop: 27,
availLeft: 1
}
// У той час як "clientWidth" показує доступну на цей момент ширину.
// Якщо вікно браузера у мене на половину екрану, то так він і буде показ
document.documentElement.clientWidth; // 564px
// А ось якщо викликати
window.screen.width; // 1024px
міряй ширину і висоту вікна засобами CSS і буде тобі щастя.
гуглі: vh, vw;
Naive, я про них знаю ось тільки багато більш-менш старі браузери їх не підтримують, а згідно https://webref.ru/css/value/size, Opera Mobile не підтримує взагалі. Так що користуюся тим, що є.
pompiduskus, начебто працює, спасибі. Але тільки при розгорнутому на всю ширину вікні. А якщо у користувача вікно браузера, скажімо, на половину екрану? Мабуть, це я висловився в описі проблеми не зовсім правильно. Картинки повинні бути у всю ширину не екрану монітора, а вікна браузера. Якщо комбінувати window.screen.width і document.documentElement.clientWidt h в залежності від ситуації - то як здійснити цей вибір практично - не уявляю. Ставити clientWidth, якщо він менше screen.width не котить - через +1263 буде менше навіть в повноекранному режимі. І ще - в ніж початкова причина даної проблеми? Просто вважаю, що встановлення цього допоможе її вирішити
І так, невеликий косяк в описі: Цитата: "Піксель менше - і первісна ширина визначається нормально - 1280px." Насправді піксель менше - і по колишньому 1263, а ось піксель більше - і вже 1280
AlexKain 05.02.2017 о 01:32 постів 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. Саме таку ширину має смуга прокрутки. Може це якось допоможе зрозуміти суть проблеми. Хоча при зміна ШИРИНИ вертикальна смуга прокрутки зникати-з'являтися не повинна ...
доводиться крутитися
Навіть смуга прокрути МОЖЕ мати різні розміри у віх барузер.
4 - 24 версія ФФ тебе хвилює? Ти блін серйозно !?
Як щодо другої версії в Internet Explorer? Або першої версії Навігатора?
vh & vw починається підтримуватися з 9 версії ІЕ. Оперу міні уже давно ніхто нахрен НЕ юзает (ну да, є капітани старого гарту, які зі своєї опери міні виходять тільки на 5-10 сайтів, на які ходять останні 10 років). Що вже говорити про ИЕ 8 і нижче ...
Кста, ти впевнений, що ВЕСЬ решті JS буде працювати у тебе в ІЕ8,7,6 і мініОпере?
Ти борешся за підтримку працездатності свого продукту у 0,5% користувачів. Ти впевнений, що це буде хоча б 1 людина? Людина в сенсі користувач, а не дебіл-перфекціоніст, який перевіряє всі цікаві йому сайти у всіх браузерах, починаючи з першої текстової версії конк'ерора? ..
Naive, практично може і непотрібно. Ось тільки якщо ти фрілансер-удаленнік, то це може послужити причиною невиплати грошей навіть при "безпечної угоді" - тобто з посередниками. Замовник може сказати: "У завданні чітко сказано:" кросбраузерності ", так що сайт повинен підтримувати нехай не всі версії браузерів, але хоча б всі види. А він Opera mobile не тягне. Фігню зробив". Простіше кажучи, це привід доколупаться. І ще, може ви живете якомусь мегаполісі, ось тільки в містах з числом населення не перевищує 100-120 К, я бачив багатьох, хто сидить в телефоні з цією самою Оперою. Технарі може і немає, а ось всі ці мед., Пед. та інші - дуже навіть, і всі вони потенційні користувачі створюваного сайту.
Ну ладно, обхідний варіант рішення на кшталт готовий. Але є якісь ідеї причини виникнення проблеми з цими 17px? Питання не пусте, хіба мало де джерело цього бага може вилізти
Чому так дивно працює і як з цим боротися?А якщо у користувача вікно браузера, скажімо, на половину екрану?
І ще - в ніж початкова причина даної проблеми?
Як щодо другої версії в Internet Explorer?
Або першої версії Навігатора?
Кста, ти впевнений, що ВЕСЬ решті JS буде працювати у тебе в ІЕ8,7,6 і мініОпере?
Ти впевнений, що це буде хоча б 1 людина?
Людина в сенсі користувач, а не дебіл-перфекціоніст, який перевіряє всі цікаві йому сайти у всіх браузерах, починаючи з першої текстової версії конк'ерора?
Але є якісь ідеї причини виникнення проблеми з цими 17px?