Viewport för mobila enheter. Tillgängliga parametrar och värden för Viewport-metataggen

Det råder ingen tvekan om att du använder viewport-metataggen när du arbetar med adaptiva mallar. Men visste du att viewport-metataggen också kan vara användbar för icke-responsiva mallar? Om du inte har tid att konvertera din projektmall till en responsiv, bör du läsa materialet denna lektion att använda viewport-metataggen för att förbättra utseendet på din design Mobil enheterÅh.

Vanlig användning av viewport-metataggen

Vanligtvis används viewport-metataggen för att ställa in bredden och initialskalan för viewporten på mobila enheter. Här är ett exempel.

Använda viewport-metataggen i en icke-responsiv mall

Som standard är visningsportbredden på iPhone inställd på 980px. Men din design kanske inte passar det här sortimentet bra. Värdet kan vara för stort eller litet för mönstret. Nedan följer två exempel. som använder viewport-metataggen för att förbättra utseendet på en icke-responsiv mall på mobila enheter.

Exempel

Se Themify-webbplatsen från din mobila enhet.

Den vänstra skärmdumpen visar utseende webbplats utan att använda viewport-metataggen. Du kanske märker att sidan nuddar båda sidor av skärmen. Om du lägger till en viewport-metatagg som anger en bredd på 1024px, kommer det att finnas ett mellanrum till vänster och höger.

Ett annat exempel

Om din design är för smal kommer den också att se klumpig ut. Låt oss säga att behållarens bredd är 700px och den anpassar sig inte. I det här fallet kommer utseendet att se ut som skärmdumpen nedan till vänster - bred vit rand vänster.

Problemet kan enkelt lösas genom att ställa in visningsportens bredd till 720px. Bredden på designen ändras inte, men den mobila enheten kommer att skala den till 720px.

Generellt fel

Ett vanligt misstag är att utvecklare ofta använder initial-scale=1 för icke-responsiva mallar. Den här inställningen resulterar i att 100 % av sidan renderas utan skalning. Om designen inte är responsiv måste användaren antingen scrolla mycket eller manuellt ställa in zoomen för att se hela sidan. Mest dåligt fall- kombination av user-scalable=no eller maximum-scale=1 med initial-scale=1 . Detta inaktiverar möjligheten att skala på webbplatsen. Och utan skalning finns det inget sätt att se hela sidan. Om din mall inte svarar, inaktivera inte skalningen eller återställ den ursprungliga skalan!

Låt oss skapa en enkel sida med minimal uppmärkning:

Hej världen!

Låt oss nu öppna den här sidan på en mobil enhet. Efter att ha öppnat den kommer vi att se att vår sida kommer att visas ungefär så här:

Som du kan se är texten för liten för att läsas, det finns mycket tomt utrymme, och för att kunna läsa den här texten måste vi zooma in på den.

Varför händer det här?

Problemet med mobila webbläsare

När man jämför mobila och stationära webbläsare är den mest uppenbara skillnaden Skärmstorlek. Mobilwebbläsare visar som standard webbplatser utformade för vanliga stationära webbläsare mycket sämre än de skulle kunna: antingen genom att minska skalan, göra text och annat innehåll för litet och oläsligt (som i vår version), eller genom att bara visa en liten del av webbplats som passar på skärmen.

Om du tänker på det logiskt är det här vettigt: mobil webbläsare ser sidan och antar att den skapades för skrivbordsversionen av webbläsaren, vilket är sant för de allra flesta webbplatser. Baserat på detta ställer den här webbläsaren in sidbredden till 980px ( Safari iPhone) och försöker passa den optimalt på smarttelefonens skärm och visar den i den minsta skalan. Vanligtvis är bredden på webbplatser ungefär så här, så när du öppnar en genomsnittlig webbsida på en mobil enhet sträcker den sig till sin fulla bredd, men 2-3 gånger mindre än dess ursprungliga storlek.

Därför, om vi vill optimera webbplatsen för smartphones, fungerar inte det här alternativet. Vi måste på något sätt berätta för webbläsaren att vår sida är avsedd att visas på mobila enheter och ställa in regler för korrekt beteende för visningsporten.

Och det är just därför vi kommer att använda metataggen utsiktsplats, som infördes av Apple och som vanligt kopieras av andra.

Lägg till i block följande rad:

Och detta är vad som kommer att hända som ett resultat:

Det är en helt annan sak. Genom att ställa in viewport-metataggen till "enhetsbredd", säger vi till webbläsaren att visningsportens bredd är bredden på den enheten, snarare än standardbredden på 980px som den kan anta som standard. På stora mängder smartphones är skärmbredden 320px (i stående läge). Du kan ställa in din egen bredd till 320px, vilket ger samma resultat, men på vissa smartphones kan skärmens bredd vara annorlunda, så det mesta bästa alternativet— använd enhetens bredd.

Ett av de vanligaste alternativen för att definiera visningsporten är följande alternativ:

som definierar sidans bredd och ställer in den initiala skalan.

Du kan också ofta hitta det här alternativet:

I det här fallet är sidan inställd på bredden på enheten som den öppnas på, och all skalning är förbjuden - både initial vid laddning och anpassad skalning efter laddning. I detta läge mobil webbsida fungerar som mobil app, där användaren endast har tillgång till vertikal eller horisontell rullning. Det är dock bättre att inte använda en sådan post blint, eftersom användaren inte kan förbjudas att zooma ut och zooma in efter behag, om inte designidén kräver det. Till exempel försämrar ett för litet teckensnitt textens läsbarhet och i det här fallet är det nödvändigt att använda en approximation.

Viewport-metataggen är relativt ny, så det här ögonblicket stöds inte av alla webbläsare, särskilt för äldre smartphonemodeller. I sådana fall är det vettigt att använda några gamla metoder som gör att webbläsaren kan identifiera sidan som optimerad för mobil webb. Detta kan göras med hjälp av följande metataggar:

Du kan läsa mer om dessa och andra specifika mobiltaggar.

Möjliga alternativ för viewport-metataggen

tabell för visningsportkompatibilitet

Två utsiktsplatser

Så låt oss säga att visningsporten är för smal för vår CSS-mall. Den självklara lösningen är att göra vyporten bredare. Men låt oss först dela upp begreppet viewport i två delar: visuell viewport och sidvisningsport.

Konceptet med viewports förklaras mycket väl av George Cummins på Stack Overflow:

Tänk på en sidvisningsport som en stor bild med konstant storlek och form. Föreställ dig nu en mindre ram genom vilken du tittar på den här stora bilden. Denna ram är omgiven av ett ogenomskinligt material som hindrar dig från att se hela den stora bilden förutom delar av den. Del stor bild, som är synlig genom ramen, kommer att vara den visuella visningsporten. Om du går bort från den stora bilden med ramen (zooma ut, d.v.s. minska skalan), kan du se hela bilden på en gång, eller komma närmare (zooma in, öka skalan), då kan du bara se en del av bilden bild. Du kan också rotera ramen för att ändra dess orientering (stående eller liggande), medan storleken och formen på den stora bilden (sidvisningsport) alltid förblir oförändrad.

Visuell visningsport- del av sidan som för närvarande är synlig på skärmen. Användaren kan bläddra för att ändra synlig del sida, eller använd skalning för att ändra storlek på den visuella visningsporten.

Sidlayout, särskilt om dess bredd anges i procent, beräknas i förhållande till sidvisningsport, som är betydligt bredare än den visuella visningsporten.

Således tar elementet -elementet initialt bredden på sidvisningsporten och sedan beter sig CSS som om skärmen vore mycket bredare än telefonens skärm. Detta ger webbplatsen samma beteende som i en stationär webbläsare.

Hur bred är själva den visuella visningsporten? Det beror på webbläsaren. Safari iPhone använder 980px, Opera använder 850px, Android WebKit använder 800px och IE använder 974px.

Vissa webbläsare beter sig annorlunda:

Symbian WebKit försöker likställa sidvisningsporten med den visuella visningsporten, och detta innebär att element i procent-bredd kan bete sig oförutsägbart. Men om sidan inte passar i den visuella visningsporten på grund av absoluta värden, sträcker webbläsaren sidvisningsporten till maximalt 850 pixlar.

Samsung WebKit gör sidvisningsporten lika i bredd som det bredaste elementet.

På BlackBerry, med en skala på 100 %, kommer sidvisningsporten att vara lika med den visuella visningsporten i alla fall.

Zoomar

Båda visningsportarna mäts i CSS-pixlar. Men under skalning ändras dimensionerna för den visuella visningsporten (när du zoomar in får färre CSS-pixlar plats på skärmen), medan dimensionerna på sidvisningsporten förblir oförändrade. (Om så inte vore fallet, skulle webbläsaren ständigt flöda om sidan på grund av omräkning av den procentuella bredden.)

Förstå sidvisningsporten

För att bättre förstå storleken på en sidvisningsport bör du titta på vad som händer i minsta möjliga sidskala. De flesta mobila webbläsare visar vilken sida som helst i minsta skala som standard.

Faktum är att dimensionerna på visningsporten på webbläsarsidan helt sammanfaller med skärmen i den maximala reducerade skalan och är därför lika med den visuella visningsporten.

Således är bredden och höjden på sidvisningsporten lika med allt som visas på skärmen i minsta skala. När användaren zoomar in förblir dessa dimensioner oförändrade.

Bredden på sidvisningsporten är alltid densamma. Om du ändrar orienteringen på smartphoneskärmen kommer den visuella visningsporten att ändras, men samtidigt anpassar mobilwebbläsaren sig till ny inriktning, zooma in lite så att sidvisningsporten igen blir samma bredd som den visuella visningsporten.

Detta har påverkat sidvisningsportens höjd, som nu är mycket mindre än i stående orientering. Men för utvecklare är bredd viktigare än höjd.

Android och target-densitydpi

Android-enheter har ett eget viewport-attribut som inaktiverar skalning för skärmar med olika upplösningar.

Det blir ingen skalning på HDPI-enheter (240dpi).

Den här posten betyder att det inte kommer att ske skalning på någon Android-enhet.

Material hämtat från webbplatsen:

En artikel där vi kommer att bekanta oss med viewport-metataggen. Låt oss överväga vilka värden innehållsattributet för denna metatagg kan ta, samt hur man konfigurerar den för en adaptiv och fixerad webbplats.

Vad är en viewport?

Viewport är synlig för användaren område på webbsidan. De där. detta är vad användaren kan se utan att behöva rulla.

Måtten på detta område bestäms av storleken på enhetens skärm. Den minsta visningsytan (viewport) finns i smartphones, vars skärmstorlekar sträcker sig från 4" till 6". Och de största är datorskärmar, vars diagonalstorlekar kan överstiga 24".

Innan smartphones och surfplattor kom, sågs webbsidor främst på datorskärmar. Viewporten på dessa skärmar var annorlunda, men inte så mycket. För att skapa webbplatser innan de mobila enheterna kom, användes främst fast eller flexibel (flexibel) uppmärkning.

Efter att smartphones och surfplattor dök upp, Viewporten för vissa enheter har blivit mycket annorlunda än viewporten för andra enheter. Detta har inneburit att sajter skapade för datorer har blivit omöjliga eller svåra att se på smartphones. Vägen ut ur denna situation var uppkomsten av adaptiv uppmärkning. Adaptiv är uppmärkning som kan anpassas olika storlekar skärmar. Adaptiv uppmärkning skapas med hjälp av mediafrågor som dök upp i CSS3-specifikationen och i för närvarande stöds av alla större webbläsare.

Men adaptiv uppmärkning började också få problem efter smartphones med hög densitet pixlar och därför hög upplösning. För att förstå denna situation mer i detalj, överväg följande exempel, där vi jämför 2 enheter.

Den första enheten är en smartphone Apple iPhone 3 (diagonal 3,5"). Den här telefonen har ingen hög pixeltäthet. För denna modell är det 163ppi (mindre än 200ppi). Fysisk upplösning av denna smartphoneär 320x480. Denna upplösning motsvarar diagonalen jämfört med upplösningen för bildskärmar på stationära enheter (datorer). De där. på webbsidan för denna smartphone kommer texten, gjord i storlek 16px, att vara lika läsbar som på en datorskärm.

Den andra enheten är Apple iPhone 4 smartphone Den har samma diagonal som Apple smartphone iPhone 3, dvs. 3,5". Men den skiljer sig från den genom att den har en hög pixeltäthet (326ppi). Därför är fler en hög upplösning- 640x960 med samma skärmstorlekar. Detta kommer att leda till att samma text och andra objekt på webbsidan kommer att se 2 gånger mindre ut under samma förhållanden. På så sätt ser texten faktiskt ut 8px. En sådan sida kommer redan att vara svår att läsa. För att göra denna sida läsbar måste dess presentation förstoras horisontellt och vertikalt med 2 gånger (skalas).

Syftet med viewport-metataggen

Viewport-metataggen utvecklades av Apple för att indikera för webbläsare i vilken skala de ska visa det synliga området på en webbsida för användaren. Meta viewport är med andra ord utformad för att säkerställa att webbsidor visas (se ut) korrekt på smartphones, surfplattor och andra enheter med hög pixeltäthet (>200ppi). Denna metatagg är till stor del avsedd för responsiva webbplatser, men den kan användas för att förbättra presentationen av webbsidor som har fast eller flexibel layout.

Lägga till en meta viewport till en webbsida

Viewport-metataggen, som nämnts ovan, är till stor del avsedd för responsiv uppmärkning. Låt oss därför börja vår övervägande med det.

Konfigurera meta viewport för responsiva webbsidor

Aktivera support metatagg viewport för responsiva webbplatser görs genom att bara lägga till en rad i huvuddelen av webbsidan:

Namnattributet är avsett att indikera för webbläsaren vilken information om sidan vi vill berätta för den. I I detta fall denna information gäller viewport.

Innehållet i denna information specificeras som värdet av innehållsattributet med nyckel-värdepar separerade med kommatecken.

För responsiv design måste värdet på attributet content viewport bestämmas av två parametrar:

• width=enhetsbredd
• initial-skala=1

Låt oss titta på var och en av dem mer i detalj.

Den första parametern (width=device-width) säkerställer att bredden på det synliga området på webbsidan är lika med CSS-bredden på enheten (enhetsbredd). Denna bredd (CSS) är inte den fysiska skärmupplösningen. Detta är ett visst värde oberoende av skärmupplösning. Den är utformad för att säkerställa att mobil responsiv webbdesign visas lika på alla enheter, oavsett deras pixeltäthet på skärmen.

Till exempel har en iPhone4-smarttelefon med en fysisk upplösning på 640x960 en CSS-upplösning på 320x480. Det betyder att en webbplats med en viewport-metatagg (width=device-width) på den här enheten kommer att se ut som om den här enheten har en upplösning på 320x480 (i det här fallet kommer värdet 320px att ersättas med enhetsbredd). De där. Det kommer att finnas 4 fysiska pixlar per CSS-pixel (2 horisontella och 2 vertikala).

Hur avgör man vilken CSS-upplösning en viss enhetsskärm kommer att ha?

Det bestäms beroende på vilken pixeltäthet skärmen har. Om skärmtätheten är mindre än 200ppi kommer CSS-upplösningen att vara lika med den fysiska. Om skärmen har en pixeltäthet på 200 till 300 (ppi) blir CSS-upplösningen 1,5 gånger lägre än den fysiska upplösningen. Och om skärmen har en densitet på mer än 300ppi, kommer CSS-upplösningen att bestämmas genom att dividera den fysiska upplösningen med en viss koefficient. Denna koefficient bestäms av formeln densitet/150ppi, vanligtvis avrundad till 2, 2,5, 3, 3,5, 4, etc.

Låt oss titta på några exempel:

• Apple iPhone 3: fysisk upplösning 320x480, pixeltäthet - 163ppi. Pixeldensiteten är mindre än 200, därför är CSS-koefficienten 1. CSS-upplösningen kommer att vara lika med den fysiska, d.v.s. 320 x 480.
• Apple iPhone 6: fysisk upplösning 750x1344, pixeltäthet - 326ppi. Pixeldensiteten är större än 300, därför blir CSS-koefficienten 326/150=2 (2,2 avrundat till 2). CSS-upplösningen blir 375x667.
• LG G4: fysisk upplösning 1440x2560, pixeltäthet - 538ppi. Pixeldensiteten är större än 300, därför blir CSS-koefficienten 538/150=4 (3,6 avrundat till 4). CSS-upplösningen blir 360x640.
• Galaxy S3 mini: fysisk upplösning 480x800, pixeltäthet - 233ppi. Pixeltätheten är större än 200, därför blir CSS-koefficienten 1,5. CSS-upplösningen blir 320x533.
• Galaxy S5: fysisk upplösning 1080x1920, pixeltäthet - 441ppi. Pixeldensiteten är större än 300, därför blir CSS-koefficienten 441/150=3. CSS-upplösningen blir 360x640.

Den andra parametern initial-scale anger den initiala skalan för webbsidan. Ett värde på 1 betyder att skalan är 100 %.

meta viewport och icke-responsiva sidor

Om webbplatsen inte har en responsiv design, kan presentationen på smartphoneskärmen också förbättras.

Du kan till exempel få sidbredden att skala så att den passar enhetens bredd (om layoutens bredd är större än CSS-bredden). Men tänk på att skalning bara fungerar inom rimliga gränser.

Detta görs också genom att sätta parametern width till device-width . De där. För icke-responsiva webbplatser måste du lägga till följande rad i rubriken:

Skalning av icke-responsiv design för att passa storleken på enheten (smartphone)

Dessutom tog webbläsarutvecklare hand om även de som har svårt att lägga till denna rad. I det här fallet kommer enhetens skärm att vara standard CSS bredd, lika med 980px. Detta gör att de flesta skrivbordslayouter kan visas utan att rulla (vid bredd).

Om du behöver visa en fast webbplats i en mobil enhets webbläsare i normal skala (ej reducerad), måste du använda följande typ av viewport-metatagg:

Ytterligare meta viewport-alternativ

Utöver huvudparametrarna innehåller meta viewport-taggen många andra.

Här är några av dem:

• minimal-skala - ställer in minimiskalan;
• maximal skala - ställer in maximal skala;
• user-scalable - indikerar om användaren kan styra vågen eller inte.

Viewport-exempel som använder ytterligare parametrar:

Ganska ofta förstår människor inte skillnaden mellan bredd (bredd) och enhetsbredd (och dessutom finns det exempel med minimum (min-enhetsbredd) och maximal bredd enheter (max-device-width)) som använder CSS-mediafrågor. Detta missförstånd leder till dålig kod och avsevärt Mer arbeta för utvecklaren. Den här frågan dyker upp mycket på SitePoint-forumen, så det är dags att förklara den mer detaljerat. Den här artikeln kommer att ta upp detta problem och även titta närmare på vilket alternativ du bör använda när du skapar responsiva webbplatser.

Grundläggande definitioner

Låt oss definiera vad vi menar när vi talar om mediefrågor baserat på "bredd" och "enhetsbredd". Citaten nedan är från MDN-artikeln om mediefrågor, och det finns denna definition av "bredd":

Medieegenskapen "width" beskriver bredden på utdataenhetens visningsyta (till exempel bredden på ett dokumentfönster eller bredden på ett sidfönster på en skrivare)

Och så här definierar MDN "enhetsbredd":

Beskriver utmatningsenhetens bredd (betyder Fullskärm eller sida, inte bara ett visningsområde som ett dokumentfönster)

Så vad betyder detta egentligen? Med enkla ord, "bredd" och "enhetsbredd" hänvisar till enhetens bredd, inte hela bredden på visningsporten, vilket kan vara ett helt annat koncept. Allt du bör bry dig om är bredden på visningsporten, oavsett enhetens bredd.

Med det sagt, den största skillnaden mellan bredd och enhetsbredd är att enhetens bredd inte alltid matchar visningsområdet för en viss enhet.

De flesta surfplattor och mobila enheter har inte alltid 1 enhetspixel per 1 pixel CSS. Till exempel bör du veta att iPhone 4 har en standard visningsyta på 640x960. Detta betyder att på i detta exempel enhetsbredden iPhone4 är 320x480. Poängen är att Apple förstår att inte alla sajter är designade för att vara responsiva och försöker tillfredsställa alla genom att tillhandahålla en bredd på cirka 980px för att visa skrivbordsversionen av sajten. Detta innebär att om det inte finns någon viewport-metatagg, kommer iPhone4 att ta sajten och göra den som om den vore 980px bred, samtidigt som den kläms in i en 320px bred skärm, vilket resulterar i att sajten ser mindre ut ur användarens perspektiv.

Börja

Till att börja med, som med allt som gör webbplatser responsiva och använda mediefrågor, måste meta-taggen för området för granskning placeras i en del av din webbplats. Grundläggande standardversion ges nedan.

Så snart detta utdrag visas på vår sida, om vi tittar på sidan på olika enheter, kommer olika mediefrågor att utlösas. Utan detta, när du tittar på en sida på en specifik enhet, kommer den helt enkelt att visas som en mindre version av sidan; enheten kommer att försöka klämma in hela webbplatsen till en 320px bred skärm. Och detta är inte bra för dig eller dina användare! Användare gillar inte att zooma in på en webbplats för att se innehåll, och de vill definitivt inte bläddra fram och tillbaka.

Låt oss till exempel ta iPhone 4, som har en standard visningsportbredd på 980px. Utan metataggen kommer dina försök att använda mediefrågor inte att resultera i något, och enheten kommer inte att komma åt standardvisningsporten korrekt. De flesta mediefrågor är utformade för att vara 500px eller mindre. Detta görs vanligtvis med en enkel maxbreddsmediafråga. Utan metataggen har du ingen effekt av denna begäran, eftersom iPhone 4 kommer att fortsätta visa den 980px breda versionen av webbplatsen. Låt oss titta på exemplet nedan:

Body ( bakgrund: vit; ) @mediaskärm och (min-bredd: 980px) /* Desktop */ ( body ( bakgrund: röd; ) ) @mediaskärm och (maxbredd: 979px) /* Surfplatta */ ( body ( bakgrund: blå; ) ) @mediaskärm och (maxbredd: 500px) /* Mobil */ ( body ( bakgrund: grön; ) )

Nedan finns två skärmdumpar tagna med använder iPhone 4. Båda sidorna har ovanstående CSS, men den ena använder meta viewport-taggen och den andra inte.

Sidan som visas ovan innehåller ingen metatagg, och som ett resultat ser bakgrunden ut som röd och efterliknar en standard 980px bred viewport, snarare än att använda en 500px mobil mediefråga.

I det här fallet är metataggen på plats och iOS renderar sidan korrekt som vi vill ha den: den är baserad på en bredd på 320px och låter våra mediefrågor fungera som vi förväntar oss.

Varför välja enhetsbredd?

För att vara ärlig, innebär titeln på den här artikeln initialt att man inte använder enhetsbredd. Enhetsbredd har dock sin plats. Om du skapar en webbplats för specifika enheter, så ja - du bör använda enhetsbredd.

Ur ett CSS- och RWD-perspektiv är en bra sajt en som verkligen är "enhetsagnostisk" och som inte försöker hänga sig åt bredden på varje enskild enhet. Inriktning på individer kontrollpunkter för olika "typer" av enheter (t.ex. surfplattor eller mobiltelefoner) uppnås genom att fokusera på hur innehåll visas vid en specifik visningsportbredd och sedan göra lämpliga ändringar i mediefrågor. Därför är det inte enheten som dikterar brytpunkterna utan layouten och innehållet, och i slutändan kan detta leda till optimala resultat, både ur din synvinkel och ur användarnas synvinkel.

Detta kan vara anledningen till att så många människor har problem med att skapa responsiv design och varför de klagar på att det är svårt. Men om de försöker designa för enskilda enheter, utkämpar de en förlorad kamp: antalet enheter som måste tas i beaktande (för att täcka allt) är för stort och reducerar helt enkelt allt till dålig kod. Det är också värt att nämna att om du bestämmer dig för att använda enhetsbredd måste du också ange separata regler för orientering (stående eller liggande): enhetens bredd ändras inte bara för att du vände enheten på sidan. Detta kräver ännu mer kod, vilket innebär ännu mer huvudvärk.

Men låt oss titta på ett annat möjligt alternativ

Hur är det med "bredd"?

Jag är av åsikten, liksom många erfarna utvecklare, att en helt responsiv sida som beter sig som förväntat på alla möjliga skärmstorlekar är den enklaste och mest lönsamt sätt få den mest effektiva layouten för alla enheter.

För att skapa en helt responsiv och flexibel sida måste utvecklaren helt enkelt se till att alla visningsportar beaktas och sidan ändrar struktur och storlek efter behov för att passa innehåll och design.

Allt du behöver för en helt responsiv sida är en responsiv webbplats och några smarta mediefrågor för att rikta in sig på standardutbudet av mobiler, surfplattor, stationära datorer + visningsportar. Jag föredrar att använda Foundations Media Queries, som är de mest exakta och täcker alla nödvändiga visningsportar.

Naturligtvis, som allt inom utveckling, är det inte enbart att använda breddbaserade frågor lösningen på alla layoutproblem. Detta är snarare nödvändigt för att testa på mobila enheter på jakt efter olika buggar och konstigheter på displayen. Men att kunna se hur allt kommer att visas på olika mobila enheter är lika enkelt som att ändra storlek på ditt webbläsarfönster.

För att testa använder jag Chrome-tillägget Responsive Web Design Tester. Det låter dig välja specifik enhet. Du kommer att se enhetens storlek och hur din sida kommer att visas på den enheten.

En annan liten fördel som jag skulle vilja nämna är att användning av breddbaserade frågor kommer att säkerställa att framtida enheter kommer att visa webbplatsen fullt ut. Detta är ett ganska lovande tillvägagångssätt eftersom du riktar in dig på något mer globalt – den övergripande storleken på visningsporten – snarare än en specifik enhet.

Till sist

Planerar du fortfarande att använda enhetsbredd i mediefrågor? Var argumenten inte tillräckligt övertygande? Att använda enhetens normala "bredd" och visningsområde gör det enklare responsiv design och i slutändan är det det bästa alternativet, som bör användas nästan alltid.

Det råder ingen tvekan om att du använder viewport-metataggen när du arbetar med responsiva mallar. Men visste du att viewport-metataggen också kan vara användbar för icke-responsiva mallar? Om du inte har tid att konvertera din projektmall till responsiv, bör du läsa den här handledningen för att använda viewport-metataggen för att förbättra utseendet på din design på mobila enheter.

Vanlig användning av viewport-metataggen

Vanligtvis används viewport-metataggen för att ställa in bredden och initialskalan för viewporten på mobila enheter. Här är ett exempel.

Använda viewport-metataggen i en icke-responsiv mall

Som standard är visningsportbredden på iPhone inställd på 980px. Men din design kanske inte passar det här sortimentet bra. Värdet kan vara för stort eller litet för mönstret. Nedan följer två exempel. som använder viewport-metataggen för att förbättra utseendet på en icke-responsiv mall på mobila enheter.

Exempel

Se Themify-webbplatsen från din mobila enhet.

Den vänstra skärmdumpen visar webbplatsens utseende utan att använda viewport-metataggen. Du kanske märker att sidan nuddar båda sidor av skärmen. Om du lägger till en viewport-metatagg som anger en bredd på 1024px, kommer det att finnas ett mellanrum till vänster och höger.

Ett annat exempel

Om din design är för smal kommer den också att se klumpig ut. Låt oss säga att behållarens bredd är 700px och den anpassar sig inte. I det här fallet kommer utseendet att se ut som skärmdumpen nedan till vänster - en bred vit rand till vänster.

Problemet kan enkelt lösas genom att ställa in visningsportens bredd till 720px. Bredden på designen ändras inte, men den mobila enheten kommer att skala den till 720px.

Generellt fel

Ett vanligt misstag är att utvecklare ofta använder initial-scale=1 för icke-responsiva mallar. Den här inställningen resulterar i att 100 % av sidan renderas utan skalning. Om designen inte är responsiv måste användaren antingen scrolla mycket eller manuellt ställa in zoomen för att se hela sidan. Det värsta fallet är kombinationen av user-scalable=no eller maximum-scale=1 med initial-scale=1 . Detta inaktiverar möjligheten att skala på webbplatsen. Och utan skalning finns det inget sätt att se hela sidan. Om din mall inte svarar, inaktivera inte skalningen eller återställ den ursprungliga skalan!