Permalänk
Medlem

Skulle nog säga att media queries är att gå på.
Att förlita sig på att sidan måste fungera med script är relativt dåligt. Förvisso att sidor idag är sällan helt utan scripts eller att de förlitar sig på det. Dock börjar det bli kutym att inte stänga ute sidor för äldre browsers. Det är ses som att inte ha användaren i fokus. Titta på lite Google talks, bla. senast i Stockholm på nordic.js diskuterades sånt.

Skulle titta på MQ och på meta viewport, initial-scale, device-pixel-ratio osv.
Använda dig av ett ramverk (grid) som använder sig av enheten "em"
https://css-tricks.com/why-ems/

Ramverk ex.
http://purecss.io/
Lättvikt med stor potens för att undvika CSS bloating (se Bootstrap).

Lite referens på viewport för hantera högre upplösningar.
https://developer.apple.com/library/safari/documentation/Appl...

Pixel-ratio för lite devices.
https://www.google.com/fusiontables/DataSource?docid=1N_eJYR_...

Kan ju en del men är ju bara back-end:are, men de där pixel pushers på kneget brukar ranta om detta.
Dock vet jag att det går inte att komma undan arbetet med media queries. Det är bara att acceptera och värna om din tid.
Kika på SASS eller LESS för att komma undan DRY (https://en.wikipedia.org/wiki/Don%27t_repeat_yourself)

Lycka till!

Visa signatur

INTEL CORE I7 5960X 3 GHZ 20MB S-2011-3 @ 4.2ghz, ASUS RAMPAGE V EXTREME, CORSAIR 32GB DDR4 DOMINATOR 3000MHZ, CORSAIR 850W, Asus RTX 2080ti OC, FRACTAL DESIGN R4

Permalänk

Tjena

Jobbar med en annan sida nu och använder mig av responsiva grid-views med media queries. Det fungerar över förväntan men. Det finns alltid ett men. Jag vill att texten blir större ju mer utåt man zoomar. Går det att fixa så att proportionerna bibehålls oavsett hur man zoomar?

Visa signatur

Computer: Windows 10, 64-bit, Intel i9 - 10850K, Asus Rog MAXIMUS XII HERO (WI-FI), 32GB RAM, Asus RTX3070

Game control: Home Cockpit, Keyboard, Saitek Pro Flight X-56 Rhino H.O.T.A.S. 

Permalänk
Medlem

Tjena,
Vad menar du med zoomar? Ändrar du storleken på sidan eller "zoom" i browsern?

Visa signatur

INTEL CORE I7 5960X 3 GHZ 20MB S-2011-3 @ 4.2ghz, ASUS RAMPAGE V EXTREME, CORSAIR 32GB DDR4 DOMINATOR 3000MHZ, CORSAIR 850W, Asus RTX 2080ti OC, FRACTAL DESIGN R4

Permalänk

Hej menar när man håller ner Ctrl och rullar med mushjulet

Zoom i browsern är det nog?

Visa signatur

Computer: Windows 10, 64-bit, Intel i9 - 10850K, Asus Rog MAXIMUS XII HERO (WI-FI), 32GB RAM, Asus RTX3070

Game control: Home Cockpit, Keyboard, Saitek Pro Flight X-56 Rhino H.O.T.A.S. 

Permalänk
Avstängd

13:37, var det med flit?

Visa signatur
Permalänk
Medlem
Skrivet av Commander:

Jag skulle kört agent detection i js och sedan applya rätt css utöver det. Nya mobiler kommer med 1920x1080 skärmar eller högre vilket gör media queries värdelösa.

Upplösningen på mobilens skärm är inte relevant, mobilens webbläsare rapporterar ändå ett lägre värde, det är därför t ex bootstrap fungerar ändå.

Skickades från m.sweclockers.com

Visa signatur

Intel Core i7 6700K | Gigabyte Z170X-UD3 | Corsair Vengeance LPX 16GB DDR4 2400Mhz | EVGA GTX 980Ti Hybrid | Samsung 950 PRO 256GB | Noctua NH-D15 | EVGA G2 750 | Fractal Design Define R5

Permalänk
Medlem

Ang. zoom med just Ctrl+scroll eller liknande. Ska du nog inte ta och optimera sidor efter. Det räcker med att få den responsiv och klara av samtliga browsers och du har att göra.
Just zoomen är det ingen (vad jag vet) som tar höjd för när sidor skrivs. Rätta mig gärna om jag har fel.

Visa signatur

INTEL CORE I7 5960X 3 GHZ 20MB S-2011-3 @ 4.2ghz, ASUS RAMPAGE V EXTREME, CORSAIR 32GB DDR4 DOMINATOR 3000MHZ, CORSAIR 850W, Asus RTX 2080ti OC, FRACTAL DESIGN R4

Permalänk
Musikälskare
Visa signatur

❀ Monitor: ASUS Swift 27" @ 1440p/165Hz ❀ CPU: Ryzen 7700X ❀ Cooling: Corsair H170i ELITE 420mm ❀ GPU: MSI 3080 Ti SUPRIM X ❀ Memory: Corsair 32GB DDR5 Vengeance ❀ Motherboard: ASUS Crosshair X670E Hero ❀ M.2: Samsung 980 Pro ❀ PSU: Corsair HX1200 ❀ Chassi: Corsair 7000X ❀ Time Spy: 19 340

📷 Mina fotografier
🎧 Vad lyssnar du på just nu?

Permalänk
Medlem
Skrivet av Zajin:

Upplösningen på mobilens skärm är inte relevant, mobilens webbläsare rapporterar ändå ett lägre värde, det är därför t ex bootstrap fungerar ändå.

Skickades från m.sweclockers.com

När jag satt och utvecklade så fick jag istället boostraps desktop variant i mobilen som körde 1920x1080 istället för mobil. Slutade med att jag körde via useragents istället då jag behövde endå få igång vissa i js koden för bara mobiler utöver utseende.

Visa signatur

Arch - Makepkg, not war -||- Gigabyte X570 Aorus Master -||- GSkill 64GiB DDR4 14-14-15-35-1T 3600Mhz -||- AMD 5900x-||- Gigabyte RX6900XT -||- 2x Adata XPG sx8200 Pro 1TB -||- EVGA G2 750W -||- Corsair 570x -||- O2+ODAC-||- Sennheiser HD-650 -|| Boycott EA,2K,Activision,Ubisoft,WB,EGS
Arch Linux, one hell of a distribution.

Permalänk
Medlem
Skrivet av Commander:

När jag satt och utvecklade så fick jag istället boostraps desktop variant i mobilen som körde 1920x1080 istället för mobil. Slutade med att jag körde via useragents istället då jag behövde endå få igång vissa i js koden för bara mobiler utöver utseende.

<meta name="viewport" content="width=device-width, initial-scale=1" />

Sätt det i sidans header så ska det fungera.
Bra praxis att alltid ha den meta-taggen med när man jobbar mot mobiler.

Skickades från m.sweclockers.com

Visa signatur

Intel Core i7 6700K | Gigabyte Z170X-UD3 | Corsair Vengeance LPX 16GB DDR4 2400Mhz | EVGA GTX 980Ti Hybrid | Samsung 950 PRO 256GB | Noctua NH-D15 | EVGA G2 750 | Fractal Design Define R5

Permalänk
Medlem
Skrivet av Zajin:

<meta name="viewport" content="width=device-width, initial-scale=1" />

Sätt det i sidans header så ska det fungera.
Bra praxis att alltid ha den meta-taggen med när man jobbar mot mobiler.

Skickades från m.sweclockers.com

Kör det med alla mina sidor.

Visa signatur

Arch - Makepkg, not war -||- Gigabyte X570 Aorus Master -||- GSkill 64GiB DDR4 14-14-15-35-1T 3600Mhz -||- AMD 5900x-||- Gigabyte RX6900XT -||- 2x Adata XPG sx8200 Pro 1TB -||- EVGA G2 750W -||- Corsair 570x -||- O2+ODAC-||- Sennheiser HD-650 -|| Boycott EA,2K,Activision,Ubisoft,WB,EGS
Arch Linux, one hell of a distribution.