People will use the device that is most convenient for them to do what they need to do. If the Website currently does not work well in mobile devices, people will go to their desktops or laptops to order if it works better there. Though you may very well lose some in the process.
Text size and readability, should come from the design for mobile devices. i.e In general the font-size you use, should not change because its a different device, it should be adapted by the device.
They key element here for this, is as Olaf suggested, and Borvik pointed out:
<meta name="viewport" content="width=device-width, initial-scale=1.0">.
This generally adjusts the website to the actual device, closing in and making text readable.
Try this code, with and without the meta tag on a mobile device and see what it does.
Code:
<head><title>Mobile Adjustment</title>
<style type="text/css">
div.container
{
max-width:80%;
background-color:#f2f2f2;
padding:10px;
overflow:hidden;
margin:10px;
margin-left:auto;
margin-right:auto;
}
div.container p
{
font-family:Verdana, sans-serif;
font-size: 12px;
text-align:center;
}
</style>
</head>
<body>
<div class="container">
<p>This text should only be readable in desktop browsers</p>
</div>
</body>
</html>
While all the HTML and CSS, are exactly the same, the only difference is the meta tag that auto adjusts the screen on the mobile device.
This is not a magic solution that will make your sites mobile immediately, but it makes it so precise screen sizes and precise fonts are not necessary.
Having a general idea of what general dimensions screen sizes are used is enough to make the website functional.
Your media queries should target the most common sizes, as ranges. i.e @media screen and (max-width:1024px) for instance would apply to anything below 1024px wide.
As has been said, design for the desktop first, but always considering what it may need to look like on a mobile device, then remove or reposition elements so its functional on a mobile device.
If you are making an online store, look at Amazon.com for instance how it changes its sotre layoit on mobile devices. It adjusts it so that its a single column instead of a grid.
These are the types of design choices you need to be aware of when making the website, and how its going to easily and painlessly adjust to the screen sizes.
Knowing that a specific device has a specific dimension is not helpful, because there are so many devices, with so many different dimensions it would be very difficult to design layouts for all of them.
Again your designs should be generic enough that they work on 300px wide and 450px wide or 600px wide generally the same. and have suitable changes as the screen grows.
----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
Web & Tech