Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

Frontend-utvecklare - vilken skärmbredd?↔️

1
Skriv svar
Permalänk
Medlem ★
●

Frontend-utvecklare - vilken skärmbredd?↔️

Tjo igen!

Jag har en rätt så öppen och allmän fråga om skärmbredd när det kommer till frontend-utveckling. Jag frågar för jag blir smått förvirrad över dessa två webbplatser som pratar om de vanligaste skärmupplösningarna för mobiltelefoner:

https://www.statista.com/statistics/1445438/leading-mobile-sc...
https://gs.statcounter.com/screen-resolution-stats/mobile/wor...

Båda verkar hamna på någonstans runt 400px skärmbredd. Men sedan tittade jag på mina två Android-telefoner, en billig OnePlus och en 5-lax Xiaomi mobil för några år sedan. Förstnämnda har skärmbredd på 720px och andra runt 1000px och i designfiler jag fått från nuvarande Uppdragsgivare så användes en iPhone X med en skärmbredd på cirka 1100px.

Dessa är ju flera gånger ifrån cirka 400px skärmbredd? Samtidigt så jag i båda länkarna om att "Övriga mobilupplösningar" motsvarar cirka 25-35 % av alla mobilupplösningar och frågan är då om det är dessa som utgör de mer "moderna" skärmupplösningarna hos mobiler idag?🤔

Mina två mobiler är ju inom "budget"-prisklassen och dyrare bör ju per automatik antingen ha lika hög skärmbredd eller ännu högre som exempelvis iPhone med sina cirka 1100px skärmbredd och cirka 2000px skärmhöjd? Jag är dessutom inte en flitig mobilanvändare så jag har ont om erfarenhet att experimentera med responsiv design trots att hela frontend-utvecklingen för det mesta bygger på "Mobile first" designtänk?🤣

Hursomhelst funderar jag på att utgå från 400px skärmbredd och ta det från där. Eller finns någon annan rekommendation vad för startpunkt i form av brytningspunkt(er) för mobiltelefoner att utgå ifrån? Webbplatsen jag utvecklar just nu så är det med 100 % säkerhet att dess primära slutanvändare kommer att använda mobiltelefoner (inte surfplattor) för att ta del av webbplatsen, och frontend-utveckling är som tidigare sagt min akilleshäl än så länge som fullstack-utvecklare på nyutexaminerad juniornivå.

Mvh,
WKF.

Visa signatur

"Den säkraste koden är den som aldrig skrivs"
"Visste du förresten att det är ett mångmiljardbolag?"
"Jag lever inte för att koda utan kodar för att sen kunna leva"

Redigera
Citera flera Citera
Permalänk
Medlem
●

De flesta moderna webbläsarna har ett inbyggt utvecklingsverktyg du kan öppna med ett knapptryck och sedan kan du browsa webbsidan utifrån upplösningen på några av världens mest sålda smartphones. Tror det räcker så. Kör med bland annat iPhone X och någon populär lur som är byggt med Android så får du snabbt en uppfattning kring hur det ser ut.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Sammanhang:

De flesta moderna webbläsarna har ett inbyggt utvecklingsverktyg du kan öppna med ett knapptryck och sedan kan du browsa webbsidan utifrån upplösningen på några av världens mest sålda smartphones. Tror det räcker så. Kör med bland annat iPhone X och någon populär lur som är byggt med Android så får du snabbt en uppfattning kring hur det ser ut.

Gå till inlägget

Tack för svaret!

Tänker du på "Responsive Mobile Design" som finns i bland annat FireFox? Återger den då samma rendering i den upplösningen likt mobila webbläsarappar skulle göra i liknande upplösningar (t.ex. FireFox på PC vs FireFox app på Android) eller kan det finnas avvikelser här så att återgivningen inte blir till 100 %? Just med hur den renderar padding, margin och flex-/grid-beteendet är vad som kan vara oroväckande då det är sådant som oftast förstör ens tänkta utseende.

Mvh,
WKF.

Visa signatur

"Den säkraste koden är den som aldrig skrivs"
"Visste du förresten att det är ett mångmiljardbolag?"
"Jag lever inte för att koda utan kodar för att sen kunna leva"

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Telefoner använder generellt en annan rendering size än den faktiska skärmstorleken pixlar. Tror den baseras på skärmstorleken i tum snarare än något annat. Ganska logiskt med tanke på hur spridda upplösningar det finns för mobiler.

Gällande brytpunkter brukar jag alltid ta avstamp i bootstraps brytpunkter. Därefter kan man eventuellt lägga till några egna vid behov, men de är (eller var?) det närmaste en standard jag hittat.

Visa signatur

Modermodem från ONOFF och bildskärmsutrustning från Electrolux. US Robotics 28.8K telefonuppringd internetförbindelse. Har en förkärlek för tysk tjejpop.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Att få webbsidan att återges lika mellan olika webbläsare är inget specifikt mobilproblem, utan det finns mer eller mindre i alla plattformar. Vad man brukar göra är att "resetta" alla marginaler, paddings och andra förinställningar till 0 och sen lägga till det man vill ha specifikt. Det finns flera såna färdiga frameworks att hitta och använda som gör just detta. Själv har jag inte jobbat aktivt med just den delen på ett tag så jag kan inte ge nåt specifikt exempel, men google is your friend.

Kan lägga till att det nu för tiden ju är extremt mycket enklare att få till då ju webbläsare följer standards mycket bättre än i the good old times. Internet Explorer kommer kanske nån ihåg...

Redigera
Citera flera Citera
Permalänk
Keeper of the Bamse ★
●

Ha i åtanke att de siffrorna du tittar på är för hela världen, där det finns miljarder av människor som bor i låginkomstländer, där man kanske köper mobiler för 700kr.

Ska din sida gå att titta på i en favela i Rio så sikta in dig på lågupplösta skärmar, men i köpstarka länder som sverige så har vi nog överlag ganska högupplösta skärmar

Visa signatur

i7 10770K, NH-D15. 16GB corsair. RTX 3080. 3TB nvme. Samsung G9. Fractal Torrent Compact. Corsair RM850.
Logitech G pro wireless mouse. Logitech TKL915 wireless. Logitech Pro X Wireless.
Macbook M3 (16GB, 512GB). HP Reverb G2.
www.bamseclockers.com

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Tack så mycket för svaren igen!

Skrivet av HappySatan:

Telefoner använder generellt en annan rendering size än den faktiska skärmstorleken pixlar. Tror den baseras på skärmstorleken i tum snarare än något annat. Ganska logiskt med tanke på hur spridda upplösningar det finns för mobiler.

Gällande brytpunkter brukar jag alltid ta avstamp i bootstraps brytpunkter. Därefter kan man eventuellt lägga till några egna vid behov, men de är (eller var?) det närmaste en standard jag hittat.

Gå till inlägget

Med annan rendering size, syftar du på pixels per inches hos mobiltelefoner? Tänker du på breakpoints här från Bootstrap?: https://getbootstrap.com/docs/5.0/layout/breakpoints/ Jag använder Tailwind och det tycks köra på lite högre breakpoints: https://tailwindcss.com/docs/responsive-design (Bootstrap sm ≥576px vs Tailwind sm ≥640px). Detta är ju en hel del mycket högre än 400px som jag funderade på och även över det världsliga snittet. Det verkar som om dessa brytpunkter utgår från rätt så "moderna" mobilskärmar då?

Skrivet av Barsk66:

Att få webbsidan att återges lika mellan olika webbläsare är inget specifikt mobilproblem, utan det finns mer eller mindre i alla plattformar. Vad man brukar göra är att "resetta" alla marginaler, paddings och andra förinställningar till 0 och sen lägga till det man vill ha specifikt. Det finns flera såna färdiga frameworks att hitta och använda som gör just detta. Själv har jag inte jobbat aktivt med just den delen på ett tag så jag kan inte ge nåt specifikt exempel, men google is your friend.

Kan lägga till att det nu för tiden ju är extremt mycket enklare att få till då ju webbläsare följer standards mycket bättre än i the good old times. Internet Explorer kommer kanske nån ihåg...

Gå till inlägget

Jag använder Tailwind så jag får gratis nollställning tack vare det! Det är också halva anledningen till att jag kör Tailwind: så slipper jag bråka med att hitta den perfekta normaliserings-CSS-filen innan jag börjar min CSS. Och vill jag ha någon CSS som är mer komplex än vad Tailwind erbjuder så kan jag bara inkludera en ytterligare CSS-fil.

Skrivet av Printscreen:

Ha i åtanke att de siffrorna du tittar på är för hela världen, där det finns miljarder av människor som bor i låginkomstländer, där man kanske köper mobiler för 700kr.

Ska din sida gå att titta på i en favela i Rio så sikta in dig på lågupplösta skärmar, men i köpstarka länder som sverige så har vi nog överlag ganska högupplösta skärmar

Gå till inlägget

Aha, ja, det låter sannolikt då. I detta sammanhang är det med 100 % säkerhet att slutanvändarna kommer att vara köpstarka personer bosatta i Sverige eller åtminstone med likartad konsumtionsförmåga som den gemene medelinkomstsvensken. Då låter runt 500px som max-width storlek lämpligt då denna webbplats är tänkt att vara mobilexklusiv?🤔

Det jag tänker är att bestämma mig för en min-width och max-width för diverse containers, först den huvudsakliga containern för innehållet och sedan blir det varierande beroende på innehållet inuti den huvudsakliga containern. Å ena sidan vill jag inte orsaka exakt samma utseende vilket kanske blir knas på vissa unika mobilskärmar så min-width och max-width ger då lite flexibilitet? Sedan får jag använda flex-wrap smart så inte t.ex. fyra items gör att bara det fjärde hamnar på ny rad utan att det då blir två per rad. Då blir det alltså en div med två divs där två items finns inuti vardera div och yttre div är den med flex-wrap?🤔

Mvh,
WKF.

Visa signatur

"Den säkraste koden är den som aldrig skrivs"
"Visste du förresten att det är ett mångmiljardbolag?"
"Jag lever inte för att koda utan kodar för att sen kunna leva"

Redigera
Citera flera Citera
Permalänk
Geeks
Jobbar med data ★
●

Vi utvecklar efter 360px som finns i Samsung Galaxy S8+ serien. Samsungs flip-telefoner har mindre bredd (ca 344px) och är inte 100% kompatibel med sajten.

Top 10 vanligaste upplösningarna på SweClockers:
390x844
1920x1080
375x812
414x896
360x800
375x667
360x780
412x915
428x926
393x852

ca 2,5% av användarna sitter fortfarande på 320px. Minns jag demografin så är det inte från Sverige.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av jreklund:

Vi utvecklar efter 360px som finns i Samsung Galaxy S8+ serien. Samsungs flip-telefoner har mindre bredd (ca 344px) och är inte 100% kompatibel med sajten.

Top 10 vanligaste upplösningarna på SweClockers:
390x844
1920x1080
375x812
414x896
360x800
375x667
360x780
412x915
428x926
393x852

ca 2,5% av användarna sitter fortfarande på 320px. Minns jag demografin så är det inte från Sverige.

Gå till inlägget

Tack så mycket för de data!

Jag kommer att utgå från 360px min-width då och en max-width för bredden av en iPhone X för den delen av webbplatsen som är 100 % tänkt att besökas och användas mobilt. Och så får jag ta ett samtal med min Uppdragsgivaren och för- och nackdelarna med dessa val och komma fram till överenskommelse om slutgiltiga skärmbredder för mobila enheter.

Mvh,
WKF.

Visa signatur

"Den säkraste koden är den som aldrig skrivs"
"Visste du förresten att det är ett mångmiljardbolag?"
"Jag lever inte för att koda utan kodar för att sen kunna leva"

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Bara för klargöra vissa delar då det känns som det är lite missuppfattning. Jag använder engelska benämningar för det är enklare.

Logical resolution/pixel
Är abstrakt och har ingen bestämd fysisk storlek. Det är lite som vektorgrafik, där du kan zooma in 500% på en cirkel utan tappa någon kvalité. Medan om du zoomar in 500% på en pixelgrafiks cirkel så kommer pixlarna att framhävas allt tydligare ju mer du zoomar. Mått som pt (points), dp (density-independent pixels), CSS-pixel är exempel på logical pixels.

Physical resolution/pixel
Är det fysiska antalet pixlar på enheten. Kan också benämnas som native resolution.

Pixels per inch (ppi) / pixel density
Mått för pixeltätheten som visar antalet pixlar inom varje tum av en digital bild/skärm.

Viewport size/resolution
Antal logiska pixlar som visas för en webbsida/webbläsare/applikation. Är ju lite olika vad man väljer att klassa som viewport. Exempelvis om du sitter vid datorn så kan webbsidans viewport vara 1920x990, medan din native resolution på skärmen är 1920x1080 för windows taskbar räknas inte in i viewporten. Inspekterar du en webbsida så kan du ju välja att se webbsidan som en iPhone X och då är det ju viewport måtten du ser.

Vi tar iPhone X som du nämner, så är den tekniska specifikationen följande
Logical resolution: 375x812px
Render scale: 3x
Physical resolution: 1125x2436px
Pixel density: 458 ppi
Screen size: 5.8"

Nu är jag ingen utvecklare och kan det tekniska. Men det som görs som jag förstår det, så definierar Apple ett defaultvärde för logical resolution (375x812px) och sen multipliceras det med render scale (3) som renderar bilden som slutligen visas i physical resolution (1125x2436px).

Det är här det uppstår missförstånd och kommunikationsmissar då man inte vet skillnaden eller vilket mått vardera part menar.

Så när du kollar statistik på statista och statcounter du länkat till, så är det viewport/physical resolution du ser. Kollar du på statcounter så kan du ju filtrera på Sverige, då ser du nedanstående resultat. 390x844 är populärast och det är inget förvånande då det är logical resolution för iPhone 12, 12 pro, 13, 13 pro, 14 och 15.

Nu är jag som sagt ingen utvecklare utan en designer. Gör jag en mock för iPhone X så är det logical resolution som gäller, dvs 390px bred, inte 1125px

Kan avrunda med ett tips för att testa en webbsida på olika enheter: browserstack.

Senast redigerat
Visa signatur

PC: AMD Ryzen 9950X3D | Gigabyte RTX 5070 Ti AERO | Samsung 990 PRO 4TB | Gigabyte B650E Aorus Stealth Ice | Corsair Dominator Titanium White 2x48GB DDR5 6600MHz CL32 | Lian Li O11 Vision Compact White | Lian Li HydroShift LCD 360TL White | Lian Li EDGE Platinum 850W White | Lian Li UNI FAN TL 3-pack 120mm Reverse White

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av WebbkodsFrilansaren:

i designfiler jag fått från nuvarande Uppdragsgivare så användes en iPhone X med en skärmbredd på cirka 1100px.

Gå till inlägget

Hur har du fått designen levererad av uppdragsgivaren? Figma prototyp? Photoshop fil?

Visa signatur

PC: AMD Ryzen 9950X3D | Gigabyte RTX 5070 Ti AERO | Samsung 990 PRO 4TB | Gigabyte B650E Aorus Stealth Ice | Corsair Dominator Titanium White 2x48GB DDR5 6600MHz CL32 | Lian Li O11 Vision Compact White | Lian Li HydroShift LCD 360TL White | Lian Li EDGE Platinum 850W White | Lian Li UNI FAN TL 3-pack 120mm Reverse White

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av IMPANI:

Hur har du fått designen levererad av uppdragsgivaren? Figma prototyp? Photoshop fil?

Gå till inlägget

InDesign-filer med inkluderade "Documents fonts" och vissa av "Links"-filerna.

Jag funderar på att hjälpa grafikern att lära sig grundläggande Figma, är ju inte så mycket mer än drag n' drop och att betrakta allt som Frames!

Mvh,
WKF.

Visa signatur

"Den säkraste koden är den som aldrig skrivs"
"Visste du förresten att det är ett mångmiljardbolag?"
"Jag lever inte för att koda utan kodar för att sen kunna leva"

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av WebbkodsFrilansaren:

InDesign-filer med inkluderade "Documents fonts" och vissa av "Links"-filerna.

Jag funderar på att hjälpa grafikern att lära sig grundläggande Figma, är ju inte så mycket mer än drag n' drop och att betrakta allt som Frames!

Mvh,
WKF.

Gå till inlägget

Fascinerade. Jag föreställer mig att personen i fråga jobbar som designer på ett mindre bolag inom print och har aldrig gjort något digitalt tidigare. Så dennes chef har gett i uppdrag att designa deras nya webbsida, för print och digitalt är ju same same i chefens ögon. Skulle förklara varför det är designat i indesign och i 1125px.

För din del så skulle jag rekommendera du tar en vidare titt i ämnet om jag förklara i korthet tidigare då det är högst relevant till din roll. Bara för att få en djupare förståelse (då det kan vara intresse för din del att lära sig det mer tekniska) då det är så pass lätt att missförstå varann och det faktum att 1px inte behöver nödvändigtvis vara 1px.

Sen kommer du ju även på sikt bli bättre på att kravställa till uppdragsgivaren i hur exempelvis designer ska levereras. Beroende på hur en design lämnas över till dig så blir det ju en enorm skillnad i tid och pris.

Visa signatur

PC: AMD Ryzen 9950X3D | Gigabyte RTX 5070 Ti AERO | Samsung 990 PRO 4TB | Gigabyte B650E Aorus Stealth Ice | Corsair Dominator Titanium White 2x48GB DDR5 6600MHz CL32 | Lian Li O11 Vision Compact White | Lian Li HydroShift LCD 360TL White | Lian Li EDGE Platinum 850W White | Lian Li UNI FAN TL 3-pack 120mm Reverse White

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av IMPANI:

Fascinerade. Jag föreställer mig att personen i fråga jobbar som designer på ett mindre bolag inom print och har aldrig gjort något digitalt tidigare. Så dennes chef har gett i uppdrag att designa deras nya webbsida, för print och digitalt är ju same same i chefens ögon. Skulle förklara varför det är designat i indesign och i 1125px.

För din del så skulle jag rekommendera du tar en vidare titt i ämnet om jag förklara i korthet tidigare då det är högst relevant till din roll. Bara för att få en djupare förståelse (då det kan vara intresse för din del att lära sig det mer tekniska) då det är så pass lätt att missförstå varann och det faktum att 1px inte behöver nödvändigtvis vara 1px.

Sen kommer du ju även på sikt bli bättre på att kravställa till uppdragsgivaren i hur exempelvis designer ska levereras. Beroende på hur en design lämnas över till dig så blir det ju en enorm skillnad i tid och pris.

Gå till inlägget

Tack återigen för svaret!

Nuvarande pågående Uppdragsgivare är ett tvåmannabolag i form av ett "familjeföretag". Trots alla mina inlägg om det pågående uppdraget så är denna Uppdragsgivare mycket flexibel och mycket öppen för mina (förändrings)förslag då jag uppfattar det som att de har stort förtroende för mig och respekterar min (begränsade(?)) professionella IT-kompetens.

Uppdragsgivaren blev mycket nöjd med mitt examensarbete från mitt tvååriga Webbutvecklingsprogram sedan ett par månader tillbaka så något värde tillför jag trots allt åt Uppdragsgivaren annars hade jag inte fått detta monetära uppdrag i efterhand. Jag säger detta för jag är fullt medveten om att på internet finns det synpunkter på att tacka ja till IT-uppdrag från icke-IT-insatta bolagskunder.

Jag har med 100 % självmedvetenhet valt att "balansera på slak lina" där jag tänker "löpa linan ut" och än så länge är "balansen" mer eller mindre perfekt!

Än så länge har jag bara arbetat med JPG, PNG, GIF, men inga SVG-filer då jag har sagt att SVG-filer - i egenskap av vektorgrafik - kan utgöra säkerhetsrisker (tänker på faktumet att WordPress "out of the box" ej tillåter uppladdning av SVG-filer utan där krävs det insticksmoduler i efterhand) då skadlig kod kan bakas in i SVG-filerna.

Jag är medveten om att en fysisk pixel på en enhet inte nödvändigtvis är lika stor som en fysisk pixel på en annan enhet, t.ex. 32" 1080p vs 24" 1080p bildskärmar varav ppi-konceptet. Under det skarpa testkörandet av webbappen från i fredags så såg jag att på fyra olika mobilenheter så såg webbappen tillräckligt bra ut rent "pixelmässigt" talat!

Mvh,
WKF.

Visa signatur

"Den säkraste koden är den som aldrig skrivs"
"Visste du förresten att det är ett mångmiljardbolag?"
"Jag lever inte för att koda utan kodar för att sen kunna leva"

Redigera
Citera flera Citera
1
Skriv svar