Prevent Scaling on Mobile Devices

I recently ran into this issue while trying to optimize a website for display on an iPad. The device was scaling my content and I did not want it to. The solution is to use the Meta Viewport Tag. Here is the fix if you run into the same issue.

<meta name="viewport" content="width=device-width,maximum-scale=1.0" />

The key is the “maximum-scale” which essentially tells the device not to scale the page any larger than it is intended to be displayed. Put this line of code with your other Meta tags in between the head tags in your html and you will be good to go.