Anpassning av webbplatsen för mobila enheter: steg-för-steg-instruktioner. Mobilversion

Mobil anpassning av webbplatsen blir alltmeri efterfrågan på grund av ökningen av antalet smartphones och tabletter. Vad är det Vilka fördelar ger det? Särskilt är detta problem relevant för ägarna av onlinebutiker, webbplatser för olika serviceföretag, bloggar och populära forum. Hur kan webbplatsen anpassas för mobila enheter? Här är en kort lista över problem som vi kommer att överväga inom ramen för artikeln.

Allmän information

Så först, låt oss titta på vad som ärrepresenterar en adaptiv design. Det här är namnet på en konfiguration där samma HTML-kod skickas till alla enheter, men storleken på elementen justeras av CSS. Olika sökrobotar kan känna igen sådana webbplatser, förutsatt att sidorna och resurserna är öppna för skanning. För att kunna berätta för webbläsare för denna möjlighet används en meta-namnetikett: "viewport". Vad är anpassningen av webbplatsen för mobila enheter?

Tänk på taggen

Så, det är nödvändigt att ta hand om detmeta name tag = "viewport". Vad för? Att det finns instruktioner till webbläsaren om hur man justera storleken och skala sidan till bredden på enhetens skärm, som du ser på webbplatsen. Om du inte lägger till det här lilla elementet blir standardsidan den sida som är utformad för datorer. Men medan mobila webbläsare kommer att försöka optimera innehållet, vilket resulterar i en ökning av teckensnitt, skalbart innehåll eller visning av innehåll som passar på skärmen. Är det trevligt? Nej, den mobila versionen av webbplatsen i detta fall kommer endast att orsaka negativ uppfattning. Efter alla typsnitt kommer att vara oproportionerligt, är det nödvändigt att rulla sidan och göra fler antal åtgärder som, även om de är små, men ändå tråkiga. Kontrollera anpassningen av webbplatsen för mobila enheter kan använda en smartphone, surfplatta eller speciella tjänster och program. Naturligtvis är de två första alternativen att föredra, men om du behöver en grundlig analys ur olika enheter och för att spara tid, då passar det senare.

Vilka är fördelarna med att anpassa platsen för mobila enheter?

Med hjälp av detta tillvägagångssätt kan:

1. Användare delar innehåll i fall där han har en adress.
2. Sökmotoralgoritmerna får exakt sidparametrar, det finns ingen förvirring med olika versioner.
3. Minska sannolikheten för fel.
4. Minska nedladdningstiden på grund av bristen på omindexering.
5. Spara resurser.

Dessutom är den adaptiva sidan lättare att skapa,snarare än flera varianter av något en. Att anpassa en webbplats för mobila enheter (det är ganska möjligt att göra det själv) är inte något komplicerat, det är tillräckligt att känna till JavaScript och kunna arbeta med CSS-format (CSS) och bilder. Det finns många sätt att uppnå uppgiften. Inom ramen för artikeln kommer tre mest populära varianter att övervägas:

1. Fokusera på JavaScript.
2. Kombinera.
3. Dynamisk användning av JavaScript.

Låt oss titta närmare på dem.

JavaScript-anpassning

I det här fallet används ett innehåll.Och med JavaScript ändras formateringen med hur sidan fungerar. Allt i sådana fall beror på plattformen. Denna algoritm liknar kaskadfrågor för formatmall. Låt oss överväga ett litet exempel på arbete i praktiken. Så vi har en sida med HTML-kod som är värd för ett <script> -element. På begäran kommer samma data att överföras. Men när det gäller bearbetning kommer enhetens prestanda att ha en betydande inverkan. Och som ett resultat kommer sidformateringen att ändras. Ett exempel är en situation med en bild som kommer att optimeras för visning på smartphones och surfplattor, och inte på datorer. En viktig fördel med det här alternativet är att datorn känner igen implementeringen automatiskt. Dessutom finns det inget behov av att skaffa en speciell titel, eftersom det inte finns någon dynamisk visning av innehåll.

Kombinerande

I detta fall anpassa webbplatsen för mobilenheten används genom att kombinera både JavaScript-funktioner och serverfunktioner. Hur ser den allmänna layouten ut? Användaren besöker webbplatsen från en specifik enhet. JavaScript får information om vad den använde och skickar den vidare till servern. Där genereras den nödvändiga koden som sedan skickas till enheten. Dessutom lagras information om detta i kakor. Och vid ett efterföljande besök läser servern data från dem. En funktion i detta tillvägagångssätt är möjligheten att använda olika varianter av HTML-kod. För korrekt funktion måste du dock ta hand om närvaron av Vary: User-agent-rubriken. I det här fallet kräver mobilversionen av webbplatsen lite mer arbete.

Dynamisk JavaScript och andra alternativ

I det här fallet förutses det att det kommer att finnassamma kod är försedd med ett specifikt element som pekar på en extern fil vars innehåll ändras beroende på vilken agent som används. Det vill säga vi kommer att ha en dynamisk sida framför oss. Hur genomförs detta? Många använder samma Vary: User-agent för detta. Och när du arbetar med sidor kommer informationen också att uppdateras i realtid, vilket verkligen är mycket bra. Det finns fortfarande mycket att säga om teorin. Hur man inte kommer ihåg divorna (<div>), med vilka du bokstavligen kan "jonglera" utseendet på webbplatsen och om många andra olika saker. Men vi är intresserade av hur man gör det!

Förberedelser inför genomförandet

Det bör noteras att det finns två tillvägagångssätt när du utför en sådan uppgift som att skapa en responsiv webbplats:

1. Manual.
2. Automatiskt.

Inledningsvis måste du välja vilken väggå. Så, ett plugin för att anpassa en webbplats för mobila enheter hjälper dig att göra allt arbete snabbt. Men bara om allt är skapat enligt vissa, klart reglerade regler. Om resursen skapades enligt dem bör programmet för anpassning av webbplatsen för en mobil enhet slutföra allt utan problem. På grund av sådana begränsningar, och ibland andra punkter och bristen på fullfjädrad kreativitetsfrihet, gör majoriteten ett val till förmån för manuella inställningar. Och programmen, även om de hjälper bokstavligen några minuter att få en attraktiv version av resursen, har fortfarande vissa nackdelar.

Flexibel layout

För att vi ska komma ut med ett bokstavligt "godis",endast relativa enheter ska användas. I praktiken är teckensnitt alla anpassade till em, och element är dimensionerade i procent. Även om du regelbundet (om du verkligen vill) kan använda px, men det är bättre att göra utan dem. När du anger bredd eller höjd bör du inte använda ett specifikt fast nummer som 1080, 1260 eller 768, utan en procentsats. Som ett exempel - bredd: 90%. Du kan göra 80%, 99% och 100%. Allt beror på befälhavarens önskan. Men hur är det med texten som visas på ett visst element? Det finns en mycket bra formel för ett sådant fall: teckensnittsbredden divideras med samma indikator för bakgrundskomponenten, och vi får vårt anspråksresultat. Ibland händer det att siffrorna kan vara väldigt långa. Till exempel är standarden 1260. Och användare kommer i vars skärmbredd är 780. Vid delning får vi ett mycket långt antal. Måste jag runda upp det? Situationen här är knepig. Många rekommenderar starkt att göra detta. Det är bättre att titta på situationen och utvärdera hur viktig noggrannhet är. Du kan till exempel ställa in att endast två, tre, fyra eller tio decimaler ska beaktas. Tro mig, det här är ett enkelt jobb, den här webbplatsanpassningen för mobila enheter. CSS, om den innehåller poster utan fel, kommer att kunna reproducera allt.

Flexibilitet med teckensnitt, bilder och mediefrågor

Som standard i webbläsare är teckenstorleken inställdvid 16 px. Men som nämnts tidigare är detta tillvägagångssätt mycket oönskat för oss. Vad ska du göra i det här fallet? Sedan delar vi det önskade värdet med basvärdet. Låt oss titta på några exempel:

1. 16/16 = 1 em.
2. 18/16 = 1,125 em.

Det erhållna resultatet måste registreras iteckenstorlek genom att lägga till efter kolon. Det är sant att om dessa värden senare inkluderas någon annanstans, bör man komma ihåg att det kommer att vara det värde vi angav som kommer att visas.

Nu när det gäller bilderna.Allt kan göras antingen i deras attribut eller i kaskad stilark med max-bredd. Glöm inte att storleken anges i procent! Och några fler ord om mediefrågor. De kan användas i fall där det är nödvändigt att ställa vissa villkor. Till exempel, om skärmbredden är mindre än 1260 pixlar, gäller reglerna som är kapslade i mediefrågan. Vad kan de göra? Om vi ​​har en vacker bakgrundsbild som ska visas i sin helhet och användaren har en liten skärm kan vi i sådana fall ordinera att den ska tas bort. På vissa sätt liknar mediefrågor if-konstruktionen. Men deras funktion är en mycket stor ... individualitet. De kan spela in alla ändringar som behöver göras när man arbetar med webbläsare i vissa storlekar.

slutsats

Antalet mobila enheter och personer somde används, växer ständigt. Därför är det mycket önskvärt att även de minsta detaljerna bearbetas i webbplatsens layout innan den börjar utvecklas, för att inte tala om begreppen. När allt kommer omkring är det nödvändigt att se till att användare som besöker webbplatsen från sina telefoner inte laddar ner data som inte visas för dem. Varför? Tja, detta är elementärt - för att inte sakta in sidorna. Och det är bättre att se till att data laddas i små delar, och att webbplatsen fungerar snabbt och effektivt.

</ p>