Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Changed the script residing in the head section to use the current or…

…ientation when determining the width
  • Loading branch information...
commit 154056e0259d4dc9a1fa47920bb0b59917e5b032 1 parent 679ee84
@mpecan authored
Showing with 4 additions and 4 deletions.
  1. +4 −4 instructions.htm
View
8 instructions.htm
@@ -21,12 +21,12 @@
<h1>Adaptive-Images Instructions</h1>
<h2>Basic instructions</h2>
<p>Copy <code>adaptive-images.php</code> and <code>.htaccess</code> into the root directory of your site. If you already have a htaccess file DO NOT OVERWRITE IT, skip down to the advanced instructions.</p>
- <p>Copy the following Javascript into the &lt;head&gt; of your site. It MUST go in the head as the first bit of JS, before any other JS. This is because it needs to work as soon as possible, any delay wil have adverse effects.</p>
-<pre><code>&lt;script&gt;document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';&lt;/script&gt;</code></pre>
+ <p>Copy the following Javascript into the &lt;head&gt; of your site. It MUST go in the head as the first bit of JS, before any other JS. This is because it needs to work as soon as possible, any delay wil have adverse effects. </p>
+<pre><code>&lt;script&gt;document.cookie='resolution='+((typeof window.orientation != 'undefined' && Math.abs(window.orientation)==90) ? screen.height:screen.width)+'; path=/';&lt;/script&gt;</code></pre>
<p>That's it, you're done. You should proberbly <a href="#config">configure some preferences</a> though.</p>
<p>NOTE 1: if you would like to take advantage of high-pixel density devices such as the iPhone4 or iPad3 Retina display you can use the following JavaScript instead.
It will send higher-resolution images to such devices - be aware this will mean slower downloads for Retina users, but better images.</p>
- <pre><code>&lt;script&gt;document.cookie='resolution='+Math.max(screen.width,screen.height)+("devicePixelRatio" in window ? ","+devicePixelRatio : ",1")+'; path=/';&lt;/script&gt;</code></pre>
+ <pre><code>&lt;script&gt;document.cookie='resolution='+((typeof window.orientation != 'undefined' && Math.abs(window.orientation)==90)? screen.height:screen.width)+("devicePixelRatio" in window ? ","+devicePixelRatio : ",1")+'; path=/';&lt;/script&gt;</code></pre>
<p>NOTE 2: you do not need the <code>ai-cookie.php</code> file unless you are using the <a href="#alternate">alternate method</a> of detecting the users screen size. So delete it if you like, no one likes mess.</p>
<p>NOTE 3: If you are extra paranoid about security you can have the ai-cache directory sit outside of your web-root so it's not publicly accessible. Just set the paths properly in the .htaccess file and the .php file.</p>
@@ -127,4 +127,4 @@ <h2 id="alternate">Alternate method for those who can't rely on JavaScript</h2>
<p><strong>If images vanish</strong>, there is something wrong with your .htaccess configuration. This happens mostly on WordPress sites - it's because the server, and wordpress, have specific requirements that are different from most servers. You'll have to play about in the .htaccess file and read up on how to use ModRewrite.</p>
<p><strong>If you're seeing error images (big black ones)</strong> That's AI working, so your .htaccess is fine. Read the messages on the image. Most of the time you'll only see this problem because your server requires less strict permissions to write to the disc. Try setting the ai-cache directory to 775, and if all else fails use 777 - but be aware this is not very secure if you're on a shared server, and you ought to instead contact your administrator to get the server set up properly.</p>
</body>
-</html>
+</html>

2 comments on commit 154056e

@MattWilcox

Sorry, but doing this would result in the same behaviour as if the JS was simply detecting device width. That's bad behaviour because it can cause images stored in cache to be too small for the device once the orientation is changed. Using the suggested code would result in broken pages for users changing from portrait to landscape within a session, for as long as the browser cache persists.

@mpecan
Owner

Thank you very much for the reply. Sorry for taking your time.

Please sign in to comment.
Something went wrong with that request. Please try again.