Hallo
Ik ben mijn eerste responsive probeersel aan het opbouwen, een zeer simpel iets.
Bij het resizen van de browser merk ik dat Chrome en Firefox on-the-fly de achtergrond wijzigen.
Bij IE8 blijft de achtergrond altijd grijs ... is dat normaal? Ik neem aan dat ik een website toch responsive kan maken?
Met vriendelijke groetenCode:<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>TEMP 2</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <style> body { background:#ccc; } @media all and (min-width:780px) { body { background:red; } } @media all and (min-width:481px) and (max-width:780px) { body { background:green; } } @media all and (max-width:480px) { body { background:blue; } } </style> </head> <body> </body> </html>
Wesley
- Eerste responsive probeersel met vraag
-
23-06-2014, 12:28 #1
- Berichten
- 940
- Lid sinds
- 15 Jaar
Eerste responsive probeersel met vraag
-
23-06-2014, 13:01 #2
- Berichten
- 446
- Lid sinds
- 12 Jaar
Re: Eerste responsive probeersel met vraag
IE versies vóór IE9 ondersteunen geen media-queries.
Als je dit wel wilt ondersteunen moet je Modernizr.js gebruiken.
PHP Code:<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.min.js"></script>
-
23-06-2014, 13:59 #3
- Berichten
- 940
- Lid sinds
- 15 Jaar
Re: Eerste responsive probeersel met vraag
Momenteel heb ik het onderstaande.
Helaas doe ik iets verkeerd denk. Enig idee wat?
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>TEMP 2</title> <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <style> body { background:#ccc; } .logo { background:black; color:white; float:left; } .menu { background:gray; color:white; } @media all and (min-width:780px) { body { background:red; } } @media all and (min-width:481px) and (max-width:780px) { body { background:green; } .logo { float:none; } } @media all and (max-width:480px) { body { background:blue; } .logo { float:none; } } </style> </head> <body> <div class="logo">LOGO</div> <div class="menu">MENU</div> </body> </html>
-
23-06-2014, 14:23 #4
- Berichten
- 34
- Lid sinds
- 10 Jaar
Re: Eerste responsive probeersel met vraag
Ik heb net de code op mijn server geprobeerd, bij mij veranderd de bg color wel bij het resizen van de browsers, Chrome en IE http://bit.ly/1ippZxn
-
23-06-2014, 14:25 #5
- Berichten
- 940
- Lid sinds
- 15 Jaar
Re: Eerste responsive probeersel met vraag
Ik heb net de code op mijn server geprobeerd, bij mij veranderd de bg color wel bij het resizen van de browsers, Chrome en IE http://bit.ly/1ippZxn
Gebruikt u ook IE8?
-
23-06-2014, 14:43 #6
- Berichten
- 940
- Lid sinds
- 15 Jaar
Re: Eerste responsive probeersel met vraag
Blijkbaar werkt het wel met een externe css ... des te beter !
Nu mijn volgende vraag ... welke breekpunten worden er meestal gebruikt voor de media ?
-
23-06-2014, 14:47 #7
- Berichten
- 446
- Lid sinds
- 12 Jaar
Re: Eerste responsive probeersel met vraag
Precies het antwoord wat ik net wou gaan geven :)
http://getbootstrap.com/css/#grid-media-queries
Hier meer info over media queries
-
23-06-2014, 15:37 #8Webblish Content & Publishing
- Berichten
- 5.633
- Lid sinds
- 17 Jaar
Re: Eerste responsive probeersel met vraag
Als je je browservenster hebt geresized om de responsiveness te controleren kun je het beste ook even je scherm vernieuwen. Soms ziet het er daarna weer heel anders uit.
-
23-06-2014, 17:29 #9
- Berichten
- 940
- Lid sinds
- 15 Jaar
Re: Eerste responsive probeersel met vraag
Heel zeker dat we niets over het hoofd zien? Lijkt me gewoon raar te zijn dat we moeten refreshen.
-
23-06-2014, 20:35 #10Webblish Content & Publishing
- Berichten
- 5.633
- Lid sinds
- 17 Jaar
Re: Eerste responsive probeersel met vraag
Bij een tab zal dat misschien anders werken, ik heb het met name bij Chrome gezien dat sommige items anders werden gerangschikt/vormgegeven als je na het resizen het venster refreshed. In ongeveer 5-10% vd gevallen, en met name bij responsive sites. Kan natuurlijk met javascripjes oid te maken hebben.
-
24-06-2014, 01:51 #11Particulier
- Berichten
- 1.412
- Lid sinds
- 15 Jaar
Re: Eerste responsive probeersel met vraag
Ik zou responsive niet voor IE8 beschikbaar maken door middel van een javascript plugin.
1. IE8 is een oude browser die vaak op oude trage PC's draait. Maak je het responsive met Javascript dan wordt er dmv allerlei berekeningen in de browser de juiste CSS geladen en dat maakt de oude IE8 op die oude PC nog veel trager.
2. IE8 draait op geen enkel mobiel apparaat. Als het ergens op draait is dat op een monitor gemiddeld 1024x768 pixels.
Ik zou er voor zorgen dat je website altijd een 1024x768 CSS laadt voor een IE8 browser. Wil je save, dan doe je 800x600 maar een javascript oplossing voor een dergelijke trage browser is mijns inziens geen goed idee.
Als je IE8 test op een snelle windows 7 bak dan zul je zien dat het perfect werkt, maar kom je een keer in aanraking met een oude bak dan zul je merken dat het geen goede oplossing is.
-
24-06-2014, 07:31 #12Webblish Content & Publishing
- Berichten
- 5.633
- Lid sinds
- 17 Jaar
Re: Eerste responsive probeersel met vraag
Windows 7 update IE8 toch ook automatisch? IE8 vind je vooral op de XP computers, met name de netbooks.
-
24-06-2014, 16:03 #13
- Berichten
- 940
- Lid sinds
- 15 Jaar
Re: Eerste responsive probeersel met vraag
Alvast bedankt voor de input iedereen !
Momenteel heb ik de onderstaande regel ingevoegd, waarmee het me lijkt te werken na het draaien.
Mijn mogelijkheden om te testen zijn natuurlijk wel beperkt ( pc + galaxy 2 tab + galaxy S3 gsm ) - Geen Apple dus
Code:<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-
24-06-2014, 18:50 #14Webblish Content & Publishing
- Berichten
- 5.633
- Lid sinds
- 17 Jaar
Re: Eerste responsive probeersel met vraag
-
25-06-2014, 10:33 #15
- Berichten
- 940
- Lid sinds
- 15 Jaar
Re: Eerste responsive probeersel met vraag
Écht wel! http://www.responsinator.com/
Veel goedkoper dan al die Apple toestellen te kopen :-)
Plaats een
- + Advertentie
- + Onderwerp
Marktplaats
Webmasterforum
- Websites algemeen
- Sitechecks
- Marketing
- Domeinen algemeen
- Waardebepaling
- CMS
- Wordpress
- Joomla
- Magento
- Google algemeen
- SEO
- Analytics
- Adsense
- Adwords
- HTML / XHTML
- CSS
- Programmeren
- PHP
- Javascript
- JQuery
- MySQL
- Ondernemen algemeen
- Belastingen
- Juridisch
- Grafisch ontwerp
- Hosting Algemeen
- Hardware Info
- Offtopic