Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Mobile CSS Page width

Trying pretty hard to make simple form page viewable in mobile devices. The form is viewable, just that I have to zoom in a lot to read it.

Hear is an example:

http://200.5.3.20/temp/PocketPC/dispatch.php

like image 931
Rick Avatar asked Mar 08 '11 17:03

Rick


People also ask

What is the size of mobile screen in CSS?

320px — 480px: Mobile devices.

What is the maximum width of a mobile phone?

Mobile (Smartphone) max-width: 480px.

How do you use viewport width in CSS?

The area that is visible is called the viewport. The size of the viewport can be defined using the width and height attributes of the <svg> element. In this example, the viewport has an aspect ratio of 3:4 and is, by default, 400 by 300 units, with a unit generally being a CSS pixel.


2 Answers

You can add the meta viewport tag that will scale the page to the device width:

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

You can read up on it here too.

like image 164
jonezy Avatar answered Sep 19 '22 17:09

jonezy


Apart what jonezy used, meta viewport tag as below will also work:

<meta name="viewport" content="width=device-width, user-scalable=no">

It will not be scalable and fit to device width - for any device, iOS or Android.

Hope it helps!

like image 35
Aditya P Bhatt Avatar answered Sep 20 '22 17:09

Aditya P Bhatt