http://themeshaper.com/forums/ Help In Shaping WordPress Themes en Fri, 24 May 2013 21:47:18 +0000 http://themeshaper.com/forums/topic/initial-scale-for-iphoneandroid#post-21594 Wed, 01 Jun 2011 21:16:10 +0000 amzero427 21594@http://themeshaper.com/forums/ <p>I'm changing this to not a support question. After some time, I decided to go with an alternate css for mobile devices instead of trying to find a way to alter the initial scale, but if anyone does find a way to do this I'd love to hear it. Gotta say though, I was reluctant to go the css route, but it was much less time consuming than I imagined, and with a fluid/responsive layout it works great:</p> <p><a href="http://themeshaper.com/forums/topic/responsive-web-design-and-thematic" rel="nofollow">http://themeshaper.com/forums/topic/responsive-web-design-and-thematic</a> </p> http://themeshaper.com/forums/topic/initial-scale-for-iphoneandroid#post-21580 Wed, 01 Jun 2011 01:04:17 +0000 amzero427 21580@http://themeshaper.com/forums/ <p>First of all, just wanted to say thanks to everybody for the thematic forums and all their input!</p> <p>I have a question about changing the content width and initial scale for viewing on an iPhone. Apparently, to adjust for iPhone, the tags look something like this:</p> <pre><code>&lt;meta name=&quot;viewport&quot; content=&quot;width = 320&quot; /&gt; &lt;meta name=&quot;viewport&quot; content=&quot;initial-scale=2.3, user-scalable=no&quot; /&gt;</code></pre> <p>I was wondering if their was a way to set a function using javascript, either in the functions.php or the header.php, that can set the initial scale only when the device is an iPhone or Android device, but leave it alone otherwise? I took a stab with </p> <pre><code>&lt;script type=&quot;text/javascript&quot;&gt; function setViewPortWidth(width) { if((navigator.userAgent.match(/AppleWebKit\/(.*)Mobile\//))||(navigator.userAgent.match(/Android(.*)Mobile/))) { element.setAttribute(&#39;content&#39;,&#39;width = 320&#39;; &#39;initial-scale = 2.3, user-scalable = no&#39;); document.body.style[&#39;max-width&#39;] = width&#39;320&#39;; } } } &lt;/script&gt;</code></pre> <p>Which totally didn't work and probably looks ridiculous to anyone who's not a noob like myself. But am I at least on the right track? Or is this an all together bad idea? </p>