Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I wanted mobile to always show a website 640px wide because of a design that would break otherwise. (a design I did not make..) Thereby I wanted to disable zooming for mobile users. What worked for me me is the following:</p> <p><strong>- UPDATED 2013-10-31</strong></p> <p>First of all, there is no way you can do this without Javascript. You will have to check the user agent string. Therefore I created a mobile-viewport.js and included the script just before the closing tag:</p> <pre><code>function writeViewPort() { var ua = navigator.userAgent; var viewportChanged = false; var scale = 0; if (ua.indexOf("Android") &gt;= 0 &amp;&amp; ua.indexOf("AppleWebKit") &gt;= 0) { var webkitVersion = parseFloat(ua.slice(ua.indexOf("AppleWebKit") + 12)); // targets android browser, not chrome browser (http://jimbergman.net/webkit-version-in-android-version/) if (webkitVersion &lt; 535) { viewportChanged = true; scale = getScaleWithScreenwidth(); document.write('&lt;meta name="viewport" content="width=640, initial-scale=' + scale + ', minimum-scale=' + scale + ', maximum-scale=' + scale + '" /&gt;'); } } if (ua.indexOf("Firefox") &gt;= 0) { viewportChanged = true; scale = (getScaleWithScreenwidth() / 2); document.write('&lt;meta name="viewport" content="width=640, user-scalable=false, initial-scale=' + scale + '" /&gt;'); } if (!viewportChanged) { document.write('&lt;meta name="viewport" content="width=640, user-scalable=false" /&gt;'); } if (ua.indexOf("IEMobile") &gt;= 0) { document.write('&lt;meta name="MobileOptimized" content="640" /&gt;'); } document.write('&lt;meta name="HandheldFriendly" content="true"/&gt;'); } function getScaleWithScreenwidth() { var viewportWidth = 640; var screenWidth = window.innerWidth; return (screenWidth / viewportWidth); } writeViewPort(); </code></pre> <p>The script checks if the visitor has an android (not chrome) or firefox browser. The android browser does not support the combination of width=640 and user-scalable=false, and the firefox browser does have a double screen width for some strange reason. If the visitor has a windows phone IE browser MobileOptimized is set.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload