Web pages display incorrectly 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.

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>

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.