Permalänk

Göra hemsida mobile responsive

Hej!

Jag håller på med en liten hemsida som fritidsprojekt, dels för att jag skulle vilja lära mig lite kod (html/css). Nu är det viktigt för den här hemsidan att den ser bra ut på mobila enheter. Hemsidan byggs i N.nu, som har en artikel för hur man kan göra sin hemsida mobile responsive, men då jag använder custom theme och är så gott som novis på kod så skulle jag behöva lite hjälp.
Jag skulle vilja ha ett litet skript som kollar vad man är på för enhet (deskop, tablet, mobile) och sedan kan jag bara använda någon form av if-sats där jag vill i min html-kod, typ "if mobile then" eller vad det nu kan vara. Går deta att göra?

Visa signatur
Permalänk
Permalänk
Medlem

CSS framework såsom bootstrap är nog din bästa chans om du vill komma undan snabbt, enkelt och få till det på ett mycket bra sätt, för att porta en hemsida till mobil responsiv kräver ganska stora erfarenheter inom css som kan ta lite tid att läsa på sig.

Som du nämner är detta endast en hobby sida och kommer alltså inte ha någon större funktion därför kan du experimentera genom att själv använda google och lära dig hur man får till en responsiv sida finns väldigt många online böcker om CSS.

Permalänk
Skrivet av NewCamps:

CSS framework såsom bootstrap är nog din bästa chans om du vill komma undan snabbt, enkelt och få till det på ett mycket bra sätt, för att porta en hemsida till mobil responsiv kräver ganska stora erfarenheter inom css som kan ta lite tid att läsa på sig.

Som du nämner är detta endast en hobby sida och kommer alltså inte ha någon större funktion därför kan du experimentera genom att själv använda google och lära dig hur man får till en responsiv sida finns väldigt många online böcker om CSS.

Ni får ursäkta men detta förstår jag icke. Vad är bootstrap och css framework för något? I N.nu:s manual står det att man kan använda sig av @media max-width någonting, vilket för mig ser ut att vara ljusår enklare än det här, även om jag inte förstår det heller. Observera att jag inte har möjlighet att göra någon www.hemsida.nu --> m.hemsida.nu redirect, utan jag har endast en adress att leka med. Finns det inte någon kodslinga man kan slänga in som tar reda på vad man har för enhet, och sedan använda if-satser? Verkar vara det enda jag förstår

Visa signatur
Permalänk
Medlem

if-mobile användes i början av mobil-eran och är något man lämnat bakom sig. I CSS3 kan du skriva funktioner som kan kolla efter enhetens upplösning och ändra respektive element efter det.

Här kan du kolla på ett enkelt exempel av media-query i CSS3
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Visa signatur

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

Permalänk
Medlem

@Marzupilami: Media funktionerna i css är vad man använder dock måste du läsa på lite innan du kan ta ett grepp på det. Bootstrap är en framework där all CSS är redan gjord så det du behöver göra är att bygga upp sidan enligt deras manual och sedan bara designa om elementen alltså får du färdiggjorda css filer med all kod.

Permalänk
Medlem

Precis som vad Florrpan sa, så kan du använda dig av media-query i CSS3. På så sätt kan du själv avgöra hur du vill att webbsidan ska se ut i önskade skärmupplösningar. Bootstrap är (enligt mig) för latmaskar, då nästan allt redan är klart. Vad är så kul med det? Mindre utmaning och mindre lärande ju

Visa signatur

Citera mig om du vill att jag ska hitta till ditt svar.
airikr.me /device:desktop. Andra projekt: Keizai, Koroth & Serenum.

Permalänk
Skrivet av Florrpan:

if-mobile användes i början av mobil-eran och är något man lämnat bakom sig. I CSS3 kan du skriva funktioner som kan kolla efter enhetens upplösning och ändra respektive element efter det.

Här kan du kolla på ett enkelt exempel av media-query i CSS3
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Skrivet av NewCamps:

@Marzupilami: Media funktionerna i css är vad man använder dock måste du läsa på lite innan du kan ta ett grepp på det. Bootstrap är en framework där all CSS är redan gjord så det du behöver göra är att bygga upp sidan enligt deras manual och sedan bara designa om elementen alltså får du färdiggjorda css filer med all kod.

Skrivet av Airikr:

Precis som vad Florrpan sa, så kan du använda dig av media-query i CSS3. På så sätt kan du själv avgöra hur du vill att webbsidan ska se ut i önskade skärmupplösningar. Bootstrap är (enligt mig) för latmaskar, då nästan allt redan är klart. Vad är så kul med det? Mindre utmaning och mindre lärande ju

Okej, då får jag läsa på om media queries då!
Återkommmer när jag stöter på problem

Visa signatur
Permalänk
Medlem
Skrivet av Airikr:

Precis som vad Florrpan sa, så kan du använda dig av media-query i CSS3. På så sätt kan du själv avgöra hur du vill att webbsidan ska se ut i önskade skärmupplösningar. Bootstrap är (enligt mig) för latmaskar, då nästan allt redan är klart. Vad är så kul med det? Mindre utmaning och mindre lärande ju

Jag brukar generellt sett hålla med om att skriva eget, men just att använda en färdiggjord grid ser jag inga problem med. Why reinvent the wheel? Finns många bra, och de har blivit utförligt testade, sedan gör man såklart egen stil på sidan utöver det.

Permalänk
Medlem
Skrivet av kronwalled:

Jag brukar generellt sett hålla med om att skriva eget, men just att använda en färdiggjord grid ser jag inga problem med. Why reinvent the wheel? Finns många bra, och de har blivit utförligt testade, sedan gör man såklart egen stil på sidan utöver det.

Precis som vad trådskaparen sa (se citat nedan), så håller hen på med att lära sig HTML och CSS. Det bästa att lära sig, är grunderna inom dessa språk och inte genom något ramverk. Självklart får hen själv bestämma vilket hen vill arbeta med, men det är rekommenderat att börja med grunderna inom både HTML och CSS, innan man börjar med något ramverk (som i det här fallet, Bootstrap). På så sätt vet hen vad allt gör och kan börja programmera mer avancerade saker (om det ens går med ett ramverk).

Skrivet av Marzupilami:

... jag skulle vilja lära mig lite kod (html/css).

För övrigt.
Jag föredrar att skriva min kod själv, för att på så sätt visa vad jag kan och hur jag tänker med allt - inte hur andra tänker och vad andra kan. Det är ju trots allt jag som sitter och programmerar mina grejer, eller hur? Om det är för något företag eller någon privatperson, så ska man såklart gå efter deras krav och inte ens egna (eller ja, lite i alla fall).

Jag har provat på Bootstrap och kände mig låst till hur andra tänker.

Visa signatur

Citera mig om du vill att jag ska hitta till ditt svar.
airikr.me /device:desktop. Andra projekt: Keizai, Koroth & Serenum.

Permalänk
Medlem
Skrivet av Airikr:

Precis som vad trådskaparen sa (se citat nedan), så håller hen på med att lära sig HTML och CSS. Det bästa att lära sig, är grunderna inom dessa språk och inte genom något ramverk. Självklart får hen själv bestämma vilket hen vill arbeta med, men det är rekommenderat att börja med grunderna inom både HTML och CSS, innan man börjar med något ramverk (som i det här fallet, Bootstrap). På så sätt vet hen vad allt gör och kan börja programmera mer avancerade saker (om det ens går med ett ramverk).

Det håller jag med om, ur läroperspektiv är det bäst att pilla själv.

Citat:

För övrigt.
Jag föredrar att skriva min kod själv, för att på så sätt visa vad jag kan och hur jag tänker med allt - inte hur andra tänker och vad andra kan. Det är ju trots allt jag som sitter och programmerar mina grejer, eller hur? Om det är för något företag eller någon privatperson, så ska man såklart gå efter deras krav och inte ens egna (eller ja, lite i alla fall).

Jag har provat på Bootstrap och kände mig låst till hur andra tänker.

Som sagt, generellt sett håller jag med. Men just grids tycker jag är lite som att säga jag vill inte använda jquery, jag vill ju skriva mina egna hjälpfunktioner. Gillar man inte bootstrap finns det många andra att använda.

Permalänk
Medlem

Ang att använda färdiga CSS ramverk så som boostrap så är det helt vanligt och accepterat. Detta visste jag redan jag när jag lärde mig att skriva CSS. Men för att lära mig förstå CSS och upplösningar mer utförligt har jag själv byggt 2 egna responsiva ramverk. Det kan vara bra som läroprocess att faktiskt testa det själv så man har en hum om vad gör vad och vad som påverkar vad.

Om man producerar hemsidor och vill ha lite mer hastighet med så lite problem/buggar som möjligt så är det logiskt att använda något som är testat och fungerar. Använder väldigt ofta Bootstrap till wordpressmallar då det är det jag lärt mig använda.

Visa signatur

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

Permalänk
Medlem
Skrivet av Marzupilami:

Ni får ursäkta men detta förstår jag icke. Vad är bootstrap och css framework för något? I N.nu:s manual står det att man kan använda sig av @media max-width någonting, vilket för mig ser ut att vara ljusår enklare än det här, även om jag inte förstår det heller. Observera att jag inte har möjlighet att göra någon www.hemsida.nu --> m.hemsida.nu redirect, utan jag har endast en adress att leka med. Finns det inte någon kodslinga man kan slänga in som tar reda på vad man har för enhet, och sedan använda if-satser? Verkar vara det enda jag förstår

Du kan ju redirecta till exempelvis www.hemsida.nu/mobil

@media all and (max-width: 800px){ /* max screen size */ #mobil { display: block; } }

<div id="mobil" style="display:none;"><a href="mobil/index.php">Gå till mobilsidan</a></div>

Permalänk
Medlem

Den här koden verkar fungera bra, men det är PHP.
Inte så svår att förstå även om du inte kan PHP.

$mobile_browser = find_mobile_browser(); // kör nedan funktion function find_mobile_browser() { if(preg_match('/(iphone|ipad|ipod)/i', $_SERVER['HTTP_USER_AGENT'])) { return 'ios'; } elseif (preg_match('/(android)/i', $_SERVER['HTTP_USER_AGENT'])) { return 'android'; } elseif (preg_match('/(webOS)/i', $_SERVER['HTTP_USER_AGENT'])) { return 'webOS'; } else { return false; } } // för att sedan styra om innehållet på sidan kan du använda: if($mobile_browser == 'ios' || $mobile_browser == 'android' || $mobile_browser == 'webOS'){ // Jag ä en mobil, gör det mobilanpassat }else{ // Jag är en dator }

Permalänk
Skrivet av Agonotheta:

Den här koden verkar fungera bra, men det är PHP.
Inte så svår att förstå även om du inte kan PHP.

$mobile_browser = find_mobile_browser(); // kör nedan funktion function find_mobile_browser() { if(preg_match('/(iphone|ipad|ipod)/i', $_SERVER['HTTP_USER_AGENT'])) { return 'ios'; } elseif (preg_match('/(android)/i', $_SERVER['HTTP_USER_AGENT'])) { return 'android'; } elseif (preg_match('/(webOS)/i', $_SERVER['HTTP_USER_AGENT'])) { return 'webOS'; } else { return false; } } // för att sedan styra om innehållet på sidan kan du använda: if($mobile_browser == 'ios' || $mobile_browser == 'android' || $mobile_browser == 'webOS'){ // Jag ä en mobil, gör det mobilanpassat }else{ // Jag är en dator }

Tack så mycket! Kan jag bara klistra in det här i mitt HTML-dokument, under en <script php> tag eller nåt?

Visa signatur
Permalänk
Medlem
Skrivet av Marzupilami:

Tack så mycket! Kan jag bara klistra in det här i mitt HTML-dokument, under en <script php> tag eller nåt?

För att köra PHP-kod måste du ha en webbserver, antingen lokalt eller genom ett webbhotell. I testsyfte är det bäst med en lokal webbserver, och då rekommenderar jag XAMPP.

När du ska lägga in PHP-koden i din .php-fil, bäddar du in den i <?php och avslutar med ?>. Om jag var du, så skulle jag dock börja mjukt: HTML och CSS. När du väl kan dessa, så kan du bygga upp dina kunskaper med PHP och MySQL.

Några bra PHP-kurser. De två första är på svenska, medan den sista länken är på engelska.

http://enges.org/phpkurs/
http://www.phpportalen.net/school.php?id=1
https://www.codecademy.com/learn/php

Visa signatur

Citera mig om du vill att jag ska hitta till ditt svar.
airikr.me /device:desktop. Andra projekt: Keizai, Koroth & Serenum.

Permalänk
Medlem

skippa if-mobile script... Det finns så många skärmupplösningar att du ändå måste lära dig göra dynamiska storlekar. media-query är bäst, ren CSS och inget trams med PHP eller javascript.
Enklast är att göra så att elementen får 100% width när du når en viss storlek.

Testa ändra storlek i webbläsaren här så ser du vad jag menar. Ett ofullständigt jobb från min sida, men du förstår principen.
http://fredrikw.se/work/grid/

Visa signatur

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

Permalänk

Avancé! Hemsidan börjar ta form nu, men det är lite kvar.
Jag har en fråga: Går det att ändra HTML med media queries? Till exempel att ett <div>-element innehåller en viss HTML-kod utifall @media screen and (max-width: 480px;), och annars innehåller en annan viss HTML-kod?

Visa signatur
Permalänk
Medlem

@Marsupilami: Du kan dölja och visa element baserat på bredd. Resultatet blir detsamma, men HTMLen måste alltså innehålla båda div-arna som du vill visa.

Ex:

<style> .show-when-large { display: none; } .show-when-small { display: box; } @media screen and (min-width: 480px) { .show-when-large { display: box; } .show-when-small { display: none; } } </style> <div class="show-when-small">Small</div> <div class="show-when-large">Large</div>

Visa signatur

as far as we can tell, the massacre went well...