More and more people are surfing the internet by mobile phones, pads, … and of course this devices have different (smaller) screen sizes.
There are some general basics you have to follow to render your site(s) well on this new devices, all of this techniques is often called “Responsive Web Design”.
Let’s start with “Configure the Viewport”:
A viewport setting controls how a page is displayed on a mobile device. Without a viewport specified, mobile devices will render the page at a typical desktop screen width and scale them to fit the real screen width. The setting of “width=device-width” avoids this, the real width is used.
Some browsers will keep the page’s width constant when rotating to landscape mode, and zoom rather than reflow to fill the screen. Adding the attribute “initial-scale=1″ instructs browsers to establish a 1:1 relationship between CSS pixels and device independent pixels regardless of device orientation, and allows the page to take advantage of the full landscape width.
Resolution: Pages optimized to display well on mobile devices should include a meta viewport in the head of the document specifying “width=device-width” and “initial-scale=1”:
<meta name=viewport content=”width=device-width, initial-scale=1″>
For more information, see: https://developers.google.com/speed/docs/insights/ConfigureViewport