Responsive webdesign testje iPad probleempje

[pasmaskas]

Ik ben een beetje aan het oefenen met responsive/adaptive webdesign. Nu schaalt alles lekker op mijn mobiel (android browser + Opera mobiel) en op de desktop schaalt alles ook goed. Alleen op de Ipad had ik het probleem dat hij de verkeerde css inlaad. Dit heb ik opgelost met deze regel:

<!-- iPad Stylesheet -->
<link rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" href="css/style960px.css" type="text/css" />

Dit werk wel alleen als ik hem in portret stand draai zoomt hij in en dat wil ik niet hij moet 100% zichtbaar zijn. Als ik daarna weer terug ga naar landschap stand dan is hij ook 2 x ingezoomt. Dit gebeurt ook op mijn mobiel in de android browser die laad dan ook het ipad css in in landschap stand en in portret stand netjes de goede.

Mijn vraag is hoe krijg ik het voor elkaar dat de website gewoon passent laad op een ipad en niet 2x inzoomt? En dat een mobiel hier niet op reageert?

Link naar de test: http://pmkmedia.nl/responsive/xhtml/

Ik hoop dat iemand mij kan helpen.

groetjes Pascal

 

[pasmaskas]

Ik heb het zelf al gevonden :thumb: ik heb de speciale regel voor ipads vervangen door een javascript. Nu reageert een mobiel niet meer op de andere css en een ipad pakt alleen de css die in het javascript staat.

<script type="text/javascript">
if((navigator.userAgent.match(/iPad/i))) {
document.write("<link type=\"text\/css\" rel=\"stylesheet\" media=\"all\" href=\"css/style960px.css\" charset=\"utf-8\" \/>");
document.write("<meta name=\"viewport\" content=\"width=device-width\" \/>");
}
</script>

Gisteren avond op een ipad en android telefoon getest en het werkt. Ik weet alleen niet hoe een iphone reageert nog.

gr pascal