Making web pages display correctly on mobile devices

This article describes a problem that may occur on some mobile devices, and how to resolve it.

Problem

When you try to view a web page on a mobile device, the page displays incorrectly. For example, you may see random characters or "gibberish" text. If you look at the page's source code, you see random characters inserted into the source code.

Cause

This problem occurs because some wireless providers, such as AT&T and Vodafone, use proxies that modify web content while it is in transit (these proxies are also known as "non-transparent proxies"). These modifications include code optimizations and whitespace removal to help improve performance. However, these automatic modifications can sometimes break existing code.

📘

Note

This problem only occurs on mobile internet connections made directly through the cellular service (for example, on 3G connections). If a mobile device uses a WiFi connection to access the web page, the problem does not occur, because the traffic does not pass through the wireless provider's proxy.

Resolution

To resolve this problem, you must instruct proxies not to alter your site's content while it is in transit. You can do this by enabling the no-transform directive for the Cache-Control header, either directly in your application code or in an .htaccess file. The following sections demonstrate these techniques.

Setting the Cache-Control header in PHP

To set the Cache-Control header in PHP, use the header() function. The following code sample demonstrates how to do this:

<?php
    header("Cache-Control: no-transform");
?>

Setting the Cache-Control header in an .htaccess file

To set the Cache-Control header in an .htaccess file, use the Header directive. The following code sample demonstrates how to do this:

<IfModule mod_headers.c>
    Header set Cache-Control "no-transform"
</IfModule>

👍

Tip

To make this change apply to your entire site, make sure you modify the .htaccess file in the public_html directory. To make this change apply to a particular directory, modify the .htaccess file in that directory only. For more information about how to use .htaccess files, please see this article.

More Information

• For more information about the no-transform cache directive, please visit http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.9.5.

• For more information about the PHP header() function, please visit http://php.net/manual/en/function.header.php.

• For more information about the Apache mod_headers module and the Header directive, please visit https://httpd.apache.org/docs/2.2/mod/mod_headers.html.

Related Articles

• Modifying HTTP headers