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

Anpassa webbsida till andra enheter, hur?

1
Skriv svar
Permalänk
Medlem
●

Anpassa webbsida till andra enheter, hur?

Hej.
Jag sitter nu och försöker anpassa min webbsida till alla enheter så som iPhone, android, surfplatta, dator, etc. På datorn ser den bra ut men på min iPhone drar menyn ut sig så man får scrolla åt höger för att se allt, samt facebook-länken som jag har på högersida med nyhetsflödet hoppar in i mitten och lägger sig över innehållet. Har försökt på många olika vis och läst på om responsiv webb vilket jag även har testat men inget verkar fungera.
Hur skulle ni ha gjort för att fixa detta? Det är främst menyn jag vill ha ordning på, så den blir i rätt storlek på skärmen eller om det kanske går att ändra så att på mobila enheter blir det en "drop-down meny" istället, går det?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

kolla på bootstrap, det gör livet så mycket enklare

Visa signatur

Citera om du vill ha svar :)

Redigera
Citera flera Citera
Permalänk
Medlem
●

Som Pelle säger skulle jag använt Bootstrap https://getbootstrap.com/

Om du har en bild på problemet skulle du vara enklare att förstå ^^
Kan tipsa om att försöka använda "max-width" i css och lägga den på 100% i förhållandet till den "container" som drop-down listan ligger i. På det sättet så kommer innehållet inte scrollas i sidled.

Du kan även testa stoppa in denna i din HTML <header>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Responsive Web Design:
https://www.w3schools.com/css/css_rwd_viewport.asp

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Jag kan inte ge tydliga svar utan att veta hur du bygger din hemsida.

Har du byggt allting korrekt från början bör det inte vara några större problem, men det låter enligt din beskrivning som du har mer problem än att bara behöva mobilanpassa den.

Grunden för att mobilanpassa är ganska simpel men bör appliceras redan från början av bygget, inte i slutet.

Visa signatur

Min Hemsida

Canon 70D | 2x Dell Ultrasharp 24" | Ryzen 3700X | 32B | GTX 1080Ti

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Som sagt så kan det vara en del meck att konvertera en sida som inte är byggd för responsiv design från början.

Ett tips är i alla fall detta:
https://browsersync.io/

Installera och ställ upp mobilen på skrivbordet (du går in på den externa länken som skapas när du kör igång browser-sync och är uppkopplad på samma nätverk). Sen ser du dina ändringar direkt i mobilen. Väldigt smidigt.

Lägg till meta-tagg för viewport

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

Samt börja kika på @media-"queries".

Visa signatur

Grubblare

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jag använder Vue och ett UI framework som heter Vuetify. Det är responsivt från grunden.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Att programmera en hemsida som anpassar sig till olika skärmstorlekar kallas att göra den responsiv.
Bootstrap är ett bra alternativ, själv har jag börjat testa CSS grid vilket är rätt nice.

Min favoritvideo för en introduktion till CSS grid https://www.youtube.com/watch?v=txZq7Laz7_4

Redigera
Citera flera Citera
1
Skriv svar