Göra hemsida mobile responsive

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Apr 2014

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?

Trädvy Permalänk
Medlem
Registrerad
Okt 2011
Trädvy Permalänk
Medlem
Registrerad
Aug 2014

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.

GTX 1080, Intel 5930K 4.0GHZ, Noctua NH-D15,ASUS X99 DELUXE, 16GB DDR4 Corsair, Fractal design r5, Corsair AX 1200i, Samsung 950 256GB, 1TB HDD.

AMD r9 280X Vapor-X, AMD 8350@4.4GHZ, 212 EVO,Gigabyte GA-970A-DS3P , 8GB DDR3 Corsair, Zalman Z11+, EVGA 500W, 120GB kingston v300 SSD, 1TBSeagate HDD.

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Apr 2014
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

Trädvy Permalänk
Medlem
Plats
Sundsvall
Registrerad
Dec 2006

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

Canon 70D | 2x Dell Ultrasharp 24" | i7 3770k | 16B | GTX 780

Trädvy Permalänk
Medlem
Registrerad
Aug 2014

@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.

GTX 1080, Intel 5930K 4.0GHZ, Noctua NH-D15,ASUS X99 DELUXE, 16GB DDR4 Corsair, Fractal design r5, Corsair AX 1200i, Samsung 950 256GB, 1TB HDD.

AMD r9 280X Vapor-X, AMD 8350@4.4GHZ, 212 EVO,Gigabyte GA-970A-DS3P , 8GB DDR3 Corsair, Zalman Z11+, EVGA 500W, 120GB kingston v300 SSD, 1TBSeagate HDD.

Trädvy Permalänk
Medlem
Plats
Hammarö
Registrerad
Jan 2004

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

Citera mig om du önskar ett snabbare svar.
https://www.instagram.com/erik_edgren/

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Apr 2014
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 edgren:

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

Trädvy Permalänk
Medlem
Registrerad
Aug 2011
Skrivet av edgren:

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.

Trädvy Permalänk
Medlem
Plats
Hammarö
Registrerad
Jan 2004
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.

Citera mig om du önskar ett snabbare svar.
https://www.instagram.com/erik_edgren/

Trädvy Permalänk
Medlem
Registrerad
Aug 2011
Skrivet av edgren:

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.

Trädvy Permalänk
Medlem
Plats
Sundsvall
Registrerad
Dec 2006

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.

Canon 70D | 2x Dell Ultrasharp 24" | i7 3770k | 16B | GTX 780

Trädvy Permalänk
Medlem
Plats
65 14
Registrerad
Dec 2001
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>

Samsung 34'' ultrawide curved
Logitech MX master & Logitech g910
Creative SoundBlaster Katana

Trädvy Permalänk
Medlem
Plats
Hemma
Registrerad
Dec 2006

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 }

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Apr 2014
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?

Trädvy Permalänk
Medlem
Plats
Hammarö
Registrerad
Jan 2004
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

Citera mig om du önskar ett snabbare svar.
https://www.instagram.com/erik_edgren/

Trädvy Permalänk
Medlem
Plats
Sundsvall
Registrerad
Dec 2006

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/

Canon 70D | 2x Dell Ultrasharp 24" | i7 3770k | 16B | GTX 780

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Apr 2014

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?

Trädvy Permalänk
Medlem
Plats
Göteborg
Registrerad
Maj 2004

@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>

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