Avatar billede themask888 Juniormester
23. august 2019 - 17:05 Der er 6 kommentarer

Tilpasse HTML hjemmeside til mobil

Ohøj derude

Arbejder pt på at færdiggøre en hjemmeside oprettet med HTML. Har fået hjælp med opsætningen (selve koden), så jeg jeg er absolut ikke HTML ekspert, men kan klare det basale hist og pist.

Dog er er jeg kommet i problemer da hjemmesiden ser perfekt ud på PC'en, men når jeg åbner på min telefonen er sagen en anden.

Jeg har forsøgt med viewport (<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">) og har tjekket at alt er som det skal være der men kan ike få siden til at tilpasse sig helt.

Dog kan jeg tilføje at det primært drejer sig om toppen på hjemmesiden som indeholder introdelen med firmalogo der ikke tilpasser sig på mobilskærmen. Resten af hjemmesiden (som er en single-page website) tilpasser sig fint dernedeaf.

Det kan goså tilføjes at navigationbar som på PC vises vandret på skærmen, er gemt væk på mobilskærmen og kan åbnes ved klik i øverste højre hjørne (3 streger). Dog er farven på stregerne samme farve som baggrunden så man kan ikke se disse. Hvordan kan dette ændres.

Er der nogen med fif til hvor der kan være noget galt?

Jeg kan sagtens sende billede med en sammenligning og kan også sende udpluk af HTML koden skulle der være behov. Bare sig til!

På forhånd tak!
Avatar billede Slater Ekspert
23. august 2019 - 17:20 #1
Ja, du er nok nødt til at vise os det - helst også med kode, da et screenshot ikke fortæller os hvordan det er lavet.
Avatar billede themask888 Juniormester
23. august 2019 - 17:26 #2
Lyder forståeligt :-)

Vi kan starte med HTML koden - header delen kommer her:

<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><!--[if IE 7 ]> <html class="ie ie7"> <![endif]--><!--[if IE 8 ]> <html class="ie ie8"> <![endif]--><!--[if IE 9 ]> <html class="ie ie9"> <![endif]--><!--[if (gt IE 9)|!(IE)]><!--><!--<![endif]-->
    <link href="images/msm-logo.png" rel="icon" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"><meta name="format-detection" content="telephone=no"><meta name="apple-mobile-web-app-capable" content="yes"><!-- GOOGLE FONT -->
    <link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
    <link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet" type="text/css" />
    <link href="http://fonts.googleapis.com/css?family=Playfair+Display:400,400italic" rel="stylesheet" type="text/css" /><!-- CSS LIBRARY -->
    <link href="css/lib/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="css/lib/owl.carousel.css" rel="stylesheet" type="text/css" />
    <link href="css/lib/font-awesome.min.css" rel="stylesheet" type="text/css" /><!-- ANIMATION -->
    <link href="css/lib/animate.css" rel="stylesheet" type="text/css" /><!-- PAGE STYLE -->
    <link href="css/style.css" rel="stylesheet" type="text/css" /><!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
    <title>MSM</title>
</head>
Avatar billede themask888 Juniormester
23. august 2019 - 17:28 #3
Et billede med en sammenligning kan hentes herfra, skulle der være behov for at få en ide om hvad jeg forsøgte at forklare ovenfor:

https://www.dropbox.com/s/g8s50qwa88yb10w/imgonline-com-ua-twotoone-9A2mJJeEzT1KYR.jpg?dl=0
Avatar billede claes57 Ekspert
23. august 2019 - 19:23 #4
er du sikker på, at du vil  have
<meta name="format-detection" content="telephone=no">
som sandsynligvis slår mobile skærme fra (gider ikke optimere til det).
Avatar billede ThomasKup Praktikant
23. august 2019 - 19:36 #5
Har din navigation i toppen en fast bredde i pixels? Det ser ud til at den går udover?
Giv den en bredde i procenter i stedet for. Fx. "width: 100%".
Dit baggrundsbillede kan du med fordel centrere på mobil, men oftest vil det give mening at have ét til mobil og ét til desktop, da mobil bruger portrait-dimonsioner og desktop bruger landscape-dimensioner.

Med venlig hilsen
Thomas
https://hvalsoe-design.dk
Avatar billede themask888 Juniormester
23. august 2019 - 21:09 #6
Tak for alle tilbagemeldinger.

@claes57: som jeg har læst mig frem til er lige præcis denne kode til for at undgå at tlfnumre bliver fremhævet på siden og man undgår at der kan klikkes på dem og “ringes op”. Er dette forkert?
Tror du det vil hjælpe at fjerne denne del for at justere på mobilskærmen?

@Thomas: hvor kan jeg undersøge navigationen i toppen? I HTML koden eller CSS? Og i så falf har du en ide om hvilken kode der tilhører denne del?
Mht baggrundsbillede, hvordan kan jeg centrere den kun i mobildelen (igen i HTML ellet CSS og hvilken kode)?
Hvis jeg vil tilføje et billede til mobil delen og et billede til desktop delen, hvordan finder jeg frem til afsnittet med mobilvidningen for at tilføje et billede i portrait?

På forhånd tak og beklager de mange spørgsmål!
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester