Hello, I am trying to redirect my website from desktop version to mobile version.

Here is the desktop version example:
http://www.example.com

Here is what I have accomplished:

The problem is that some files are stored under the www version and I want them to be shown on the m version like javascript and images.

Any help would be much appreciated.

Here is my code:

RewriteEngine on
RewriteBase /

RewriteCond %{HTTPS} on
RewriteRule ^(.*)$ http://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

RewriteCond %{HTTP_HOST} ^example.xyz [NC]
RewriteRule ^(.*)$ http://www.example.xyz/$1 [L,R=301,NC]

RewriteCond %{HTTP_USER_AGENT} android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge\ |maemo|midp|mmp|opera\ m(ob|in)i|palm(\ os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows\ (ce|phone)|xda|xiino [NC,OR]
RewriteCond %{HTTP_USER_AGENT} ^(1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a\ wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r\ |s\ )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1\ u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp(\ i|ip)|hs\-c|ht(c(\-|\ |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac(\ |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt(\ |\/)|klon|kpt\ |kwc\-|kyo(c|k)|le(no|xi)|lg(\ g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-|\ |o|v)|zz)|mt(50|p1|v\ )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v\ )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-|\ )|webc|whit|wi(g\ |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-) [NC]
RewriteRule ^$ http://m.example.xyz [R,L]

RewriteRule ^(categories|collections|about|contact)$ $1.php [NC,L]

RewriteRule ^picture/([\d]+)$ picture.php?id=$1 [NC,L]
RewriteRule ^category/([-\w]+)$ category.php?category=$1 [NC,L]
RewriteRule ^collection/([-\w]+)$ collection.php?collection=$1 [NC,L]

Dani AI

Generated

Good news: you do not need to duplicate assets to make an m-dot work. Keep JS/CSS/images on the www host (or a static subdomain/CDN as and suggested) and reference them with absolute URLs from the m site, e.g. . One caveat: web fonts loaded cross-origin (from www on m) must be CORS-enabled or some browsers will block them. If you serve fonts from www, return an Access-Control-Allow-Origin header that allows m. subdomain requests. (w3.org)

If you want to redirect smartphones to m while preserving asset requests and paths, keep the rules narrow and path-aware:

# Force HTTPS (both hosts)
RewriteCond %{HTTPS} !=on
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

# On www only, redirect phones to the same path on m (but not assets)
RewriteCond %{HTTP_HOST} ^www\.example\.xyz$ [NC]
RewriteCond %{REQUEST_URI} !^/(assets|images|css|js|fonts)/ [NC]
RewriteCond %{REQUEST_URI} !\.(css|js|png|jpe?g|gif|svg|webp|ico|woff2?|ttf|eot)$ [NC]
RewriteCond %{HTTP_USER_AGENT} (android|iphone|ipod|mobile|iemobile|opera\ mini) [NC]
RewriteRule ^ https://m.example.xyz%{REQUEST_URI} [L,R=302]

And add CORS for fonts on www:

<IfModule mod_headers.c>
  <FilesMatch "\.(woff2?|ttf|otf|eot)$">
    Header set Access-Control-Allow-Origin "https://m.example.xyz"
  </FilesMatch>
</IfModule>

SEO housekeeping for m-dot setups: cross-link each desktop URL to its mobile counterpart with rel="alternate" on desktop and rel="canonical" on the mobile URL; make sure every desktop page maps to an equivalent mobile URL (avoid redirecting many pages to just the mobile home). If you can, long term, consider consolidating to a single responsive URL pattern to simplify maintenance. (developers.google.com)

Recommended Answers

All 3 Replies

If you utilize a CDN for all your assets (images, css , js, etcetera) instead of serving them from your own web server then problem solved. As a bonus your website will load faster worldwide. There are some 'free' CDN's out there.

What I do is use a different subdomain for static images that uses Lighthttpd without any extensions. It's faster because it's so lightweight, it doesn't even have the ability to process PHP files in case someone uploads a malicous .php attachment and tries to execute it on the server, and I limit use of cookies to just the www. domain so that there is no extra HTTP overhead from sending cookie information in the headers when retrieving images.

Also, I don't mean to avoid your question. It's just that I'm not super proficient with Regex.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.