user2101421
user2101421

Reputation: 17

How to use .htaccess to show mobile site on phones but NOT tablets?

We have a desktop and mobile website. However, the mobile version is fairly simple and doesn't look good on iPad/tablet. Can we suppress a mobile site from appearing on a tablet, and only have it appear on the a phone device? This is an apache/PHP/Drupal site. I am pretty new to .htaccess.

<FilesMatch "\.(engine|inc|info|install|make|module|profile|test|po|sh|.*sql|theme|tpl(\.php)?|xtmpl)$|^(\..*|Entries.*|Repository|Root|Tag|Template)$">
  Order allow,deny
</FilesMatch>

# Don't show directory listings for URLs which map to a directory.
Options -Indexes

# Follow symbolic links in this directory.
Options +FollowSymLinks

# Make Drupal handle any 404 errors.
ErrorDocument 404 /index.php

# Set the default handler.
DirectoryIndex index.php index.html index.htm

# Override PHP settings that cannot be changed at runtime. See
# sites/default/default.settings.php and drupal_environment_initialize() in
# includes/bootstrap.inc for settings that can be changed at runtime.

# PHP 5, Apache 1 and 2.
<IfModule mod_php5.c>
  php_flag magic_quotes_gpc                 off
  php_flag magic_quotes_sybase              off
  php_flag register_globals                 off
  php_flag session.auto_start               off
  php_value mbstring.http_input             pass
  php_value mbstring.http_output            pass
  php_flag mbstring.encoding_translation    off
</IfModule>

# Requires mod_expires to be enabled.
<IfModule mod_expires.c>
  # Enable expirations.
  ExpiresActive On

  # Cache all files for 2 weeks after access (A).
  ExpiresDefault A1209600

  <FilesMatch \.php$>
    # Do not allow PHP scripts to be cached unless they explicitly send cache
    # headers themselves. Otherwise all scripts would have to overwrite the
    # headers set by mod_expires if they want another caching behavior. This may
    # fail if an error occurs early in the bootstrap process, and it may cause
    # problems if a non-Drupal PHP file is installed in a subdirectory.
    ExpiresActive Off
  </FilesMatch>
</IfModule>

# Various rewrite rules.
<IfModule mod_rewrite.c>
  RewriteEngine on

  # Block access to "hidden" directories whose names begin with a period. This
  # includes directories used by version control systems such as Subversion or
  # Git to store control files. Files whose names begin with a period, as well
  # as the control files used by CVS, are protected by the FilesMatch directive
  # above.
  #
  # NOTE: This only works when mod_rewrite is loaded. Without mod_rewrite, it is
  # not possible to block access to entire directories from .htaccess, because
  # <DirectoryMatch> is not allowed here.
  #
  # If you do not have mod_rewrite installed, you should remove these
  # directories from your webroot or otherwise protect them from being
  # downloaded.
  RewriteRule "(^|/)\." - [F]

  # If your site can be accessed both with and without the 'www.' prefix, you
  # can use one of the following settings to redirect users to your preferred
  # URL, either WITH or WITHOUT the 'www.' prefix. Choose ONLY one option:
  #
  # To redirect all users to access the site WITH the 'www.' prefix,
  # (http://example.com/... will be redirected to http://www.example.com/...)
  # uncomment the following:
  RewriteCond %{HTTP_HOST} !^www\. [NC]
  RewriteRule ^ http://www.%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

  # Handle traffic to /mobile by code within the theme
  RewriteRule ^mobile(.*)$ /sites/all/themes/custom/mobile_site$1 [L]

Upvotes: 0

Views: 1880

Answers (1)

Kenzo
Kenzo

Reputation: 3643

I realise this isn't answering the question exactly as you asked it, but I'm going to suggest a very different, very effective solution. Use a mobile detection class/library as a hook when your site first gets hit and redirect based on that. There is an excellent class called Mobile-Detect on Github that is very well maintained, and super easy to implement: https://github.com/serbanghita/Mobile-Detect/

You should be able to build this into your site as a library, and then set a cookie or session that will persist the user's device state so it doesn't have to be detected with every page request.

The reason I suggest this is because if you do it in the Apache virtual host or in a .htaccess file, you need to do something like this:

    RewriteEngine on
    RewriteCond %{HTTP_USER_AGENT} iphone|ipad|android|blackberry [NC]
    RewriteRule ^$ /mobile.php

Easy enough, but you now have to keep that maintained for any mobile/tablet user agent. And what of larger android screens? A mobile detection class built into your application will allow you to update without messing with your Apache rules, and you'll benefit from having something that's kept up to date by a community. And having every request evaluated by Apache like this is just consuming a lot of resources for something that can be done once per visitor and then handled by a cookie or session.

Upvotes: 1

Related Questions