StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><em>Note: this solution is more about performance than quick fix and I'm finally done</em></p> <p>I assume since your are using memcache you get your content from a MySQL Database, then parse it in PHP and save it to the cache and display it.</p> <p>Each version would have a different domain. iPhone/Android (and other smartphone) will use the <code>m.domain.com</code> domain, tablets (iPad, galaxy etc...) will use <code>t.domain.com</code>, all others will use <code>o.domain.com</code> and the default will use <code>www.domain.com</code> or <code>domain.com</code>.</p> <p>All these sub-domains can point to the same folder (<code>/var/www/</code> - the default one). What will do the trick is how you call it.</p> <p>Add this your .htaccess or apache config:</p> <pre><code>SetEnvIf Host ^www\. page=www SetEnvIf Host ^o\. page=others SetEnvIf Host ^m\. page=mobile SetEnvIf Host ^t\. page=tablets rewriterule ^.*$ index.php?subdomain=%{ENV:page} [QSA,L] </code></pre> <p>So in your PHP file you can use the <code>$_GET['subdomain']</code> and decide what you need to do to generate your page. This way, it is very easy to maintain, you have 1 point of entry and you can setup rules in PHP to retrieve information on what you need to display (the content will be the same, only the layout will change).</p> <p>One thing I recommend will be to optimize your files. The mobile version of your site should be ligher in any way (CSS, Images, JS). You don't want your user to load big CSS, JS and images from a mobile device with a slow network. You want to optimize as much as possible for slower network device. In other words, you don't want to display a 300x200 logo on a 176x220 flip phone device. One way will be to name your file based on the domain they are in. For example:</p> <ul> <li>file.css (4k) <strong>V.S.</strong> file-m.css (0.4k)</li> <li>logo.jpg (300px * 300px 15k) <strong>V.S.</strong> logo-m.jpg (100px * 40px 2k)</li> </ul> <p>And in your PHP code you can have a logic to dynamically load JS, Images and CSS files. As a remember, the faster you load your mobile site, the better it is. Maintability is important but your users are too. If you have a slow mobile site, they will trend to not go to your site and go somewhere else. Not everybody is using 3G/4G network or WiFi on their phone. Also, I recommend to use output compression (like <a href="http://httpd.apache.org/docs/2.0/mod/mod_deflate.html" rel="noreferrer">deflate</a>) when you want to access your files. </p> <p>This will improve your loading time, specially for the mobile devices. Now, if you use the <strong>same</strong> file, let's say a Javascript file for submit a news letters, you don't want to duplicate it nor copy it with the name. Instead of creating an extra logic in your PHP, you can create a symbolic link like this:</p> <p><code>ln -s /var/www/js/file.js /var/www/js/file-m.js</code></p> <p>With this solution, you will need to redirect to the appropriate site depending on the type of device they use. You don't want a flip phone view an iPhone version of your site. Here's a couple trick you can do to accomplish this:</p> <pre><code>// PHP version - also make sure the current domain is checked otherwise you will be in an infinite loop! if(strpos($_SERVER['HTTP_USER_AGENT'],'iPhone') !== FALSE || strpos($_SERVER['HTTP_USER_AGENT'],'Android') !== FALSE) { header('Location: http://m.domain.com/'); exit(); } </code></pre> <p>OR in the .htaccess/apache config under the default site:</p> <pre><code>RewriteEngine On RewriteCond %{HTTP_USER_AGENT} "iphone|android" [NC] RewriteCond %{HTTP_HOST} !^mobile.domain.com RewriteRule ^(.*)$ http://m.domain.com/ [L,R=301] # or 302 if you want temporary # etc... </code></pre> <p>I recommend to look at <a href="http://detectmobilebrowsers.com/" rel="noreferrer">http://detectmobilebrowsers.com/</a> to find out what you can use for the mobile devices and you can check <a href="http://validator.w3.org/mobile/" rel="noreferrer">http://validator.w3.org/mobile/</a> to make sure everything looks good for your mobile device.</p> <p>As of the common PHP files, I will recommend to use a centralize place, a specific path you can use and the outside world can't. You can put all this code in a common folder where all the sites can access these files. Example:</p> <p><code>/web/lib/</code></p> <p>This way, nobody, except you, can access directly your files. In your PHP code you will do something like (for example the login script):</p> <pre><code><?php define('BASE_PATH', '/web/lib/'); require(BASE_PATH . 'filex.php'); // etc... </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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