Маштабирование Ctrl+колёсико. Как сделать чтоб работало на сайте?

Shnap · Эксперт

Сделал сайт http://hvvb.ru (модератор, не сочти за рекламу плз)
Я только учусь, опыта в создании сайтов нету почти.

Почему не работает функция Ctrl+колёсико на win? А на сафари работает но наполовину, масштабируется только текст но не картинки..

Как сделать чтоб работало, помогите плз...

Сейчас в каждом диве установлен фон-картинка с шириной 100% экрана..

Как сделать чтоб по нажатию Ctrl+колёсико сайт уменьшался? как на https://www.apple.com/ или https://www.samsung.com/ чтоб картинка тоже уменьшалась а по бокам оставались две белые полоски.

Sergaffan · Гуру

Не по теме:
Шрифт просто ад. Очень сложно читать и воспринимать прочитанное.

POZITIF · Продвинутый форумчанин

Замена ступечного подшипника .......... 2800р
"ступица "
инвалид - пенсионер, наклеивший наклейку, а также заполнивший онлайн-заявку и озвучивший hvs получит скидку 90% ?

и почему привязка масштаба к окну ?

ATX555 · Гуру

nethello · Гуру

В браузере SRWare Iron вообще ничего не меняется, только указывает процент от 25 до 500, а сайт так и остаётся неподвижен

ДобрыйФей · Мечтатель Предупреждений : 5

Потому что vw, vh.

Shnap · Эксперт

ATX555 · Гуру

ДобрыйФей · Мечтатель Предупреждений : 5

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

Shnap · Эксперт

ATX555
ДобрыйФей
Ага, немного прояснилось, спасибо)

Shnap · Эксперт

ATX555
ДобрыйФей

Чот не пойму опять (( Если я задаю ширину контейнера в пикселях, например 1280, то когда ширина окна или монитора меньше чем 1280, то контейнер вылазит за границу окна, что не есть гуд.. CTRL да, при этом работает.. Но хочется сделать так чтоб при любой ширине окна сайт был "на всё окно" как собственно сейчас и сделано.. Он полностью масштабируется от ширины окна, и даже размер шрифта меняется плавно)

Просто к этому нужно добавить ещё чтоб работал ctrl+колесико.. Чтоб как на samsung.com

Чтоб вместе работало и привязка к ширине окна и масштабирование..

ДобрыйФей · Мечтатель Предупреждений : 5

Примерно такой эффект тебе нужен?

Нажмите сюда, чтобы просмотреть текст

Код:

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
   html, body, p {
      margin: 0;
      box-sizing: border-box;
   }
   #content {
      background: #fff;
      height: 100%;
      max-width: 300px;
      margin: 0 auto;
   }
   #container {
      background: #000;
      height: 100vh;
   }
</style>
</head>
<body>

<div id="container">
<div id="content">
   <p>Content</p>
</div>
</div>
</body>
</html>

Во-первых, если бы ты открыл для себя панель веб-разработчика в браузере, то мог бы сам изучить верстку на приведенных выше сайтах. Там я нигде ни процентов, ни единиц вьюпорта не увидел, а ширина чаще всего вообще не указана - просто auto. У меня в примере так же.
Во-вторых, CSS одним свойством width не ограничивается. Смотри пример.
В-третьих, проценты, vw и vh не масштабируются.
В-четвертых, сядь уже и изучи документацию.

Shnap · Эксперт

ДобрыйФей

Ну да, типа того эффект нужен)

Нужно чтоб всё было как есть сейчас только чтоб впридачу ctrl+колесико заработало)

Насчет изучить документацию это ты конечно прав, но блин зачем тогда нужны форумы) Мы ж тут с 2008го года чувак)

Тоесть ты хочешь сказать что если проценты, vw и vh не масштабируются, то мне заново писать стили надо?)

Shnap · Эксперт

ДобрыйФей

Вот глянь запись с экрана.
На смартфоне работает если двумя пальцами делать.
Хочу чтоб на компе точно так же было когда зажимаешь ctrl и крутишь колёсико)

По моим соображениям, без чтения документации Very Happy

, я понимаю что весь сайт нужно окутать одним большим дивом и к нему применить какую то функцию..(?) Типа чтоб внутри этого дива всё работало с vw и процентами, а снаружи появлялись полоски по бокам при масштабе меньше 100%)

ДобрыйФей · Мечтатель Предупреждений : 5

Shnap · Эксперт

ДобрыйФей

Ну понял, понял... спасибо тебе.