Søg
Avatar billede j-roar-h Nybegynder
11. december 2010 - 12:57 Der er 10 kommentarer og
1 løsning

Viderestille til mobilbrowser

Hej,

Jeg har et spørgsmål angående hvordan man får en hjemmeside til at tjekke hvilken browser man bruger.

Jeg er ved at lave en mobil version af en hjemmeside. I den forbindelse vil jeg gerne have at den automatisk går ind på mobil versionen hvis man går på siden via mobilen.

Jeg har hørt noget om man kan tjekke hvilken browser brugeren bruger og hvis man så bruger en mobil browser, viderestiller den så automatisk til mobil versionen.

Er der nogen der ved hvordan man gør det?
Avatar billede claes57 Ekspert
11. december 2010 - 14:25 #1
vis css
læs http://blogs.techrepublic.com.com/programming-and-development/?p=640&tag=nl.e055
du skal have en
@media handheld
og så en
@media screen
til 'normale' skærme.
Avatar billede j-roar-h Nybegynder
11. december 2010 - 14:58 #2
Jeg har nu læst den side du linkede til, men jeg kan ikke helt finde ud af hvor jeg skal indsætte @media handheld og hvor jeg skal indsætte @media screen.

Jeg har prøvet at sætte det ind i toppen af min style til mobil siden, men der meldte den fejl.

Det er opbygget således at jeg har en side hvor alle sider til den "normale" side ligger i roden. Jeg har så en mappe i roden, hvor jeg har lagt min mobile side.
Avatar billede claes57 Ekspert
11. december 2010 - 15:17 #3
du laver din side som fx
<!DOCTYPE html>
<html>
  <head>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title></title>
<style type="text/css">
@media all {
font-family: verdana, sans-serif;
}
@media handheld {
body {
border: none;
padding-bottom: 5px;
font-size: 8pt;
background: white;
color: black;
}
h1, h2 {
font-size: 10pt;;
} }
@media screen {
body {
background: blue;
color: white;
font-size: 10pt;
}
h1, h2 {
font-size: 14pt;;
} }
@media print {
body {
width: auto;
margin: 0 5%;
padding: 0;
font-size: 12pt;
background: white;
color: black;
} }
</style>
  </head>
  <body>
her er så din tekst - på alm skærm er det hvid på blå baggrund, på håndholdte er det sort på hvid baggrund og mindre skrift.<br>
Ved udskrift er det sort på hvid, og større skrift.<br>
Skriften er overalt verdana.
  </body>
</html>
Avatar billede claes57 Ekspert
11. december 2010 - 15:18 #4
obs - du skal ikke lave separate sider til mobil - bare styre din opbygning via css. Så har du også kun et sted at vedligeholde.
Avatar billede j-roar-h Nybegynder
11. december 2010 - 16:30 #5
Jeg har nu prøvet at lave en test.

Jeg lavede en ny html fil og indsatte følgende:

<!DOCTYPE html>
<html>
<head>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title>TEST</title>
<style type="text/css">
@media all {
font-family: verdana, sans-serif;
}
@media handheld {
body {
border: none;
padding-bottom: 5px;
font-size: 8pt;
background: white;
color: black;
}
h1, h2 {
font-size: 10pt;;
} }
@media screen {
body {
background: blue;
color: white;
font-size: 10pt;
}
h1, h2 {
font-size: 14pt;;
} }
@media print {
body {
width: auto;
margin: 0 5%;
padding: 0;
font-size: 12pt;
background: white;
color: black;
} }
</style>
  </head>
  <body>
her er så din tekst - på alm skærm er det hvid på blå baggrund, på håndholdte er det sort på hvid baggrund og mindre skrift.<br>
Ved udskrift er det sort på hvid, og større skrift.<br>
Skriften er overalt verdana.
  </body>
</html>

Problemet er bare at den er ens på min computer og på min smartphone. Har jeg gjort noget forkert?
Avatar billede claes57 Ekspert
11. december 2010 - 17:19 #6
jeg har ikke selv en, så kan ikke teste - men læs hele artiklen på
http://www.howtocreate.co.uk/tutorials/css/mediatypes
Avatar billede j-roar-h Nybegynder
11. december 2010 - 17:25 #7
Okay. Jeg har lige et lille ekstra spørgsmål. Kan man også gøre således når man kan flash på sin "normale" side? Det vil jo ikke kunne vises på de fleste smartphones?
Avatar billede claes57 Ekspert
11. december 2010 - 17:41 #8
hvis du placerer flash i en <div class='xxx'> som kun vises på alm skærme, så burde den sorteres fra på handheld (hvis du har visibility:hidden; i klassen på handheld)
fx noget som
<div class="flashfilm">kode til din flash</div>

@media handheld {
body {
border: none;
padding-bottom: 5px;
font-size: 8pt;
background: white;
color: black;
}
h1, h2 {
font-size: 10pt;
}
flashfilm{
visibility:hidden;
} }
@media screen {
body {
background: blue;
color: white;
font-size: 10pt;
}
h1, h2 {
font-size: 14pt;;
}
flashfilm{
visibility:visible;
} }
Avatar billede j-roar-h Nybegynder
12. december 2010 - 15:44 #9
Okay.. Tak for hjælpen. Der virker dog ikke. Den vises ens begge steder. Men smid et svar så for du point.
Avatar billede claes57 Ekspert
12. december 2010 - 15:57 #10
bare læg et svar selv - det virker jo ikke...
Avatar billede j-roar-h Nybegynder
13. december 2010 - 16:23 #11
okay
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
Kategori
Se alle it-kurser fra Computerworld Kurser
IT-kurser om Microsoft 365, sikkerhed, personlig vækst, udvikling, digital markedsføring, grafisk design, SAP og forretningsanalyse.
Se alle it-kurser

Flere spørgsmål fra Andre onlineløsninger kategorien

Titel Indlæg Oprettet Seneste aktivitet
Mobilpay svindel Af nu_igen i Andre onlineløsninger 8 24/01/202609:50 I dag 12:02
Streaming af film Af jgormm i Andre onlineløsninger 4 27/09/202508:01 28/09/202510:12
Drop i Core Web Vitals i Google search console Af Elby i Andre onlineløsninger 0 08/08/202514:32 -
hvilken AI foretrækker I ? Af jcr18 i Andre onlineløsninger 5 07/05/202521:10 24/01/202611:03
Hvordan dæmmer man bedst op for 'bots' på sin hjemmeside? Af hudsonium i Andre onlineløsninger 5 29/03/202514:28 03/06/202508:10
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 20:06 Hjemmeside der virker både på mobil og computer Af Strawberry i PHP
I går 17:08 Problemer med borger.dk Af valby i Windows
I går 14:19 Fejl Af buls i Windows
I går 13:44 Adgang til Google konto via Ipad Af cyperbent i E-mail programmer
24/0109:50 Mobilpay svindel Af nu_igen i Andre onlineløsninger
White papers
Flere white papers »