Exact width for mobile browsing

O

opensource

New Member
Hi
I wonder what would be exact width for mobile page.
I made a website for mobile then i have tested it and see the output in my
smartphone then the layout is too big. I try to Google it then i found some
tips to put some
<meta name="viewport" content="width=400, initial-scale=1">
in my html index. But then it didn't work. I set my container into
100% so that my bar will continue till the screen size of the phone.
But then the width size is so small.

I made some separate directory for my mobile pages from my main
website. Then when I browse it through my mobile, the page looks
bad and i try to put this <meta name="viewport" content="width=400, initial-scale=1"> tag above from <header>, nothing happens. I found that one
from the tutorial.

I also tried to change the content="width=400 into 350, but still nothing
happen. Or is there any other option or way aside from putting this tag?
Here what it looks:
Can anyone give me a tip or advice on how exactly to get the exact width
that will fit into all mobiles. I'm a newbie into mobile designs and this is my
first attempt.

One thing too, I know there something special script for iPhones to redirect.
Can anyone give a tip or advice on how to redirect using the iPhone?
 
R

Roddy

New Member
I wonder what would be exact width for mobile page.
Click to expand...

Mobile devices come in a large range of sizes. Compare the screen width of an iPhone in portrait mode and an iPad in landscape.

The viewport meta tag would normally define the content width as being equal to the device width so you need express widths as percentages.

If you want to use a framework for your first attempt, have a look at jQuery Mobile. The instructions are comprehensive.

To find out about responsive design, Initializr is a good starting point.

The method you use to direct visitors to the mobile site opens up another can of worms.
 
krymson

krymson

Member
Your best bet is to go with media queries and responsive design so that your website will render properly in all viewports. You can check Out CSS Tricks, thats a very good site and you can play with the size of the window to show you how each viewport size works.

But Chris is right... now if you wanted to do a separate stylesheet for each device then go for it... but you would have to write HUNDREDS of stylesheets in order to do so... so you set some fluid widths and use some good old fashioned css to style for max and min width and everything like that.
 
R

Roddy

New Member
The Initializr link I referred to above gives you the choice of HTML5 boilerplate, Responsive or Bootstrap.

I did try Bootstrap at one point but its not nearly as good as jQuery Mobile and reminds me too much of Wordpress.
 
O

opensource

New Member
Thank so much mates. I'll try the framework that you have advice and I'll get back
here to ask when i encounter something. Thanks much mates. So much really
appreciated.
 
You must log in or register to reply here.
Top