HTML & CSS
http://www.coop-polis.com= this in potrait - below 960px - seem cut on the right and when zoom out seem whole - the desired... how do seem whole without zoom out...from the start after initial load?
<meta name="viewport" content="width=device-width, initial-scale=1">
I can an error on that link:
Oops! Google Chrome could not find www.coop-polis.com=
Did you mean: www.*coop-*polis.*com
If you are the viewport meta tag then it is up to you to make the page fit on various devices by using media queries to make it fit as required. hat usually means creating a responsive layout of some sort.
If you do not have media queries in place then you don;t need the viewport meta tag and you should let the device scale the page to fit as required. This of course means that on a small mobile screen the text will be very small as the whole layout will be assumed to be 980px width and then scaled to fit the 320px width viewport. On an ipad in landscape this will probably not be an issue but as devices get smaller the layout is zoomed smaller to fit the device.
When you add the viewport meta tag you basically tell the devices that you will be handling how the layout will look which means it won;t get zoomed in or out and then you use media queries to adapt the layout to fit better in smaller screens.
Does that answer your question or did I miss the point?
try without "=" , by mistake typed "=" ...
you mean without media Queries and without viewport tag => screen of web site(width) fits device(width)? in this case can zoomed? same is true for xhtml non html5 pages?
I'm not sure if I am understanding you correctly but the following may answer your question.
If you omit the viewport meta tag then the device will try and scale the page to fit the device as best as it can.
If you add the viewport meta tag then its up to you to set the appropriate width for the device (via media queries). If you don't adapt the layout then it will stick out of the viewport as though you had just closed the window on a desktop machine and sized it down to 320px.
If you are talking about something else such as the values for initial-scale in the viewport meta tag then that is a different concept.
I'm not quite clear on which aspect you are querying but form your comments about 960px width then I guess you are finding that content on an ipad is sticking out of the viewport. If so then that's because you have added the viewport meta tag and the ipad expects you to adjust the layout to make it fit properly. If you remove the meta tag then the ipad will scale the page smaller to fit automatically (within reason).
The main point is that if you are building a responsive web site then you need the viewport meta tag so that the mobile device takes note of the media queries you are setting which will control how the layout looks.
If you have not build a responsive layout and don't use media queries then omit the viewport meta tag.
thks for quick response ... you say
"If you remove the meta tag then the ipad will scale the page smaller to fit automatically (within reason)."
in this case user still have the ability zoom in or out? if yes to what zoom factor/level?
To whatever the limit is on the device. The user will be able to zoom the page larger as long as you have not restricted it with user-scalable = "no" or with maximum scale = 1.
See here for more info and explanation.
This topic is now closed. New replies are no longer allowed.