Auto-zoom код?

Post Reply
qnkov90
Нов
Нов
Posts: 63
Joined: Sun Mar 26, 2017 6:05 pm

Auto-zoom код?

Post by qnkov90 » Mon Feb 17, 2020 10:33 pm

Някой има ли идея за някой зоом-код, който да работи добре към всички браузери?
Пробвах нещо такова, но все нещо не е наред с някой браузер?

Code: Select all

@media screen and (max-width: 1920px) {
  html {
    -moz-transform: scale(1.0, 1.0);
    zoom: 1.0;
    zoom: 100%;
  }
}
@media screen and (max-width: 1280px) {
  html {
    -moz-transform: scale(0.75, 0.75);
    zoom: 0.75;
    zoom: 75%;
  }
}
@media screen and (max-width: 800px) {
  html {
    -moz-transform: scale(0.50, 0.50);
    zoom: 0.50;
    zoom: 50%;
  }
}

User avatar
deam0n
Web-tourist
Web-tourist
Posts: 3036
Joined: Sat Oct 01, 2005 4:33 pm
Answers: 204
Location: Шопландия
Contact:

Re: Auto-zoom код?

Post by deam0n » Wed Feb 19, 2020 9:08 am

Zoom и scale са малко по-различни едно от друго..

Защо искаш да го направиш така? Така не се прави responsive design!?

Почти съм сигурен, че на по-малки резолюции така няма да се чете нищо и сайта ще стане неизползваем.

По-добре виж какво е responsive grid
https://www.w3schools.com/css/css_rwd_grid.asp
и responsive typograpfy
https://blog.logrocket.com/the-elements ... typography
https://css-tricks.com/snippets/css/fluid-typography/

qnkov90
Нов
Нов
Posts: 63
Joined: Sun Mar 26, 2017 6:05 pm

Re: Auto-zoom код?

Post by qnkov90 » Wed Feb 19, 2020 2:56 pm

Точно заради това ще задам за всяка резолюция колко да зоомва, а при про-малка, ще си е на 100 процента. Проблема е, че винаги нещо се чупи като направя тоя зоом, но защо нямам проблем със зоома от самият браузер? Най-вероятно имам мешница в кода на темат, заради това и така се получават счупвания?

Да тръгна от сега да се уча как се прави респонсиве... Ако знаеш как се прави и можеш, дай ти дам 30-40 лева и да ми го респоснеш. :)

User avatar
deam0n
Web-tourist
Web-tourist
Posts: 3036
Joined: Sat Oct 01, 2005 4:33 pm
Answers: 204
Location: Шопландия
Contact:

Re: Auto-zoom код?

Post by deam0n » Wed Feb 19, 2020 3:37 pm

Това със zoom-a е малко непредивидо като че ли..

То тоя твоя сайт според мен лично най-добре да си намериш някоя сходна по визия тема, която е responsive и да отделиш малко време и да я сложиш нея. Чиста работа. Тамън от 2008 ако не е сменян един ъпдейт няма да му дойде зле :)

User avatar
dakata__92
Web-tourist
Web-tourist
Posts: 3351
Joined: Tue Aug 02, 2011 7:24 pm
Answers: 128

Re: Auto-zoom код?

Post by dakata__92 » Wed Feb 19, 2020 3:43 pm

И на мен не ми е на душата идеята със зуум. Да, решение е на проблема, но не е правилното такова. :naughty:

qnkov90
Нов
Нов
Posts: 63
Joined: Sun Mar 26, 2017 6:05 pm

Re: Auto-zoom код?

Post by qnkov90 » Wed Feb 19, 2020 8:25 pm

Ами, българско решение е. Ако успея да го направя без проблем в браузерите, няма да ми пука за респонсиве накрая.
Иначе ако тръгна да сменям темата, единственото решение е аниме тема, но пригодена за тая работа, с допълнителни плъгини и екстри, които са за проекти. Струва има няма 30-40 долара и трябва отначало да почна всичко, понеже там не е със страници, а специална база за анимета и куп щуротии - https://www.codester.com/items/14052/de ... ress-theme

Наистина не ми се занимава. Дайте мнения как да направиме нещата със зоома и да изчистиме грешките из различните браузери и всичко ще е ток. Като цяло на 110 процента искам да вдигна зоома, което ще е добре. ;)

Ето при хроме проблем - https://prnt.sc/r4szod
- Отдолу постоянно играе скролването за наляво-надясно.

Ето при firefox - https://prnt.sc/r4t12w
- Освен, че има същия проблем, при него и горе менюто се изяжда.

Предполагам това всичко се дължи на грешки и лош код в темата, а не в самият зоом код. Но нямам идея как да ги оправя, като че ли. :)

ЕДИТ:

@media screen and (max-width: 1920px) {
html {
-moz-transform: scale(1.1, 1.1);
-webkit-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
zoom: 1.1;
zoom: 110%;
}
}

В момента пробвах така, за да може при всички браузери да работи зоома, но така scale яде навсякъде горе сайта. А без скале, само със зоом, при интернет експлорера и мозила, не прави никакъв зоом, само при Хрома работи без скале.

@media screen and (max-width: 1920px) {
html {
-moz-transform: zoom(1.1, 1.1);
-webkit-transform: zoom(1.1, 1.1);
-ms-transform: zoom(1.1, 1.1);
zoom: 1.1;
zoom: 110%;
}
}

Ако го обърна пък така, само при Хрома си остава зумнато. Навсякъде другаде се връща обратно, както си е било.

@media screen and (max-width: 1920px) {
html {
transform: scale(1.2);
transform-origin: top
}
.zoom {
zoom: 120%;
}

А по този начин, при Мозила и Експлорера, не яде горе логото, но го прави при Хроме.
То това направо ме побърква вече. :)

User avatar
Revelation
Web-tourist
Web-tourist
Posts: 910
Joined: Sun Mar 24, 2013 1:23 pm
Answers: 64

Re: Auto-zoom код?

Post by Revelation » Wed Feb 19, 2020 11:32 pm

Никога няма да го нагодиш, защото предназначението на zoom никога не е било такова.

Хората са добавили media queries, за да можеш да нагаждаш дизайна си според резолюцията и по този начин да направиш сайта responsive(но не използвайки zoom/scale).

Ако толкова държиш да използваш твоя начин, направи няколко файла за всеки браузър, нагоди ги, направи си JS скрипт, който да идентифицира браузъра на потребителя и според това, динамично зареждай съответния CSS файл.

qnkov90
Нов
Нов
Posts: 63
Joined: Sun Mar 26, 2017 6:05 pm

Re: Auto-zoom код?

Post by qnkov90 » Sun Feb 23, 2020 10:52 am

За жалост, идея си нямам как да го направя това. Ако знаеш да ползва media queries, дай да си пишеме. :)))

Post Reply