I am designing a web page for Opera Mobile. It has a little zoom icon on the left right corner. When I visit www.opera.com, this icon becomes invisible and zoom level becomes fixed. For any other web page it appears and I can zoom in and out of the page. I want the same fixed zoom behavior in my page too. It is probably some css property. Do you know what properties should I set and on which objects? Or do you think there would be another way to accomplish this.
Thank you.
It looks like they are using the "viewport" meta tag to specify the width of the page. This probably is set to smaller than mobile Opera's available scren width, so the Zoom button is not needed.
Here is the tag as it is used on the mobile version of Opera.com:
<meta name="viewport" content="width=320" />
To keep your page from scaling, I would set the tag to be as follows:
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no" />
Although keeping the user from scaling would not be my first choice UI-wise.
The opera developer site describes the support of this tag:
The viewport meta tag
The viewport meta tag contains information about the preferred settings of the viewport for viewing the HTML page it is contained within. Just like any other meta tag, viewport sits inside the head element of your HTML page—browsers that support it use the information to display the web page more appropriately for that device, while browsers that don’t simply ignore it. It was originally created by Apple to improve the way web pages display on the iPhone, but we have added support for it in Opera Mobile 9.5 because it is a good way of optimizing display information for different mobile devices. The tag looks like so:
<meta name = "viewport" content = "width = device-width, height = device-height" />
All it contains is the meta attribute, which specifies that this is a viewport meta tag, and the content attribute, which contains a comma-delimited list of the different values you want to specify for this page. The different pieces of information you can specify are as follows:
width and height: These specify the width and height that the viewport should be set at for this web page. The values can be set in pixels, or you can use the device-width and device-height values, respectively, to specify that the width and height should be set as the full width and height of the device’s screen. The default value of width is 980 pixels, and it can be set from 200 to 10,000 pixels. The default value of height is calculated from the width of the device and its aspect ratio, and it can be set from 223 to 10,000 pixels.
initial-scale: This sets the initial scale of the web page when it is first displayed. By default it just fills up the whole screen of the device, unless you deliberately set it otherwise.
minimum-scale and maximum-scale: These specify the minimum and maximum amounts that the user is allowed to zoom in and out, their values being multipliers. minimum-scale has a default value of 0.25, and its value can range from just above zero to 10.0. maximum-scale’s value can also range from just above zero to 10.0.
user-scalable: Specifies whether the user is allowed to zoom in and out—possible values are yes and no, with yes being the default.
Opera Mobile 9.5 fully supports the viewport meta tag, with a few notable specific behaviours. It ignores user-scalable, minimum-scale and maximum-scale because we believe that zooming is a browser feature that should always be available for users. Also, as the presence of the viewport meta tag in the page’s head section indicates the author has taken care of optimizing for mobile, small screen rendering is not applied. This means that viewport-enabled pages will look exactly the same whether “Mobile view” is switched on or off.
It is recommended that width and height values are not hardcoded for a single device, such as the iPhone; instead you should set their values to device-width and device-height, so that your pages also work nicely on VGA, QVGA, WVGA and WQVGA devices.
Related
I read on a website the following:
Mobile browsers render pages in a virtual "window" (the viewport),
usually wider than the screen, so they don't need to squeeze every
page layout into a tiny window (which would break many
non-mobile-optimized sites). Users can pan and zoom to see different
areas of the page.
I don't have much of experience, can someone please explain using other terms. I didn't understand how the mobile create a viewport and then let the user to zoom in that viewport.
It all means that the page it will fit the mobile's screen when using the meta tag , something like this:
<meta name="viewport" content="width=device-width, initial-scale=1">
So instead of the page showing like desktop view - all shrinked - and then you have to zoom in (a lot) to read, you can just simply scroll, because the content will fit properly the mobile/tablet's screen.
You may or may not be able to zoom depending on the property you use on the meta tag viewport.
This maximum-scale=1 will allow you to block zoom if your initial-scale=1
From what I understand I should set a meta tag in the header as mentioned below, use min-width(or min-device-width?) values in media queries building up from the smallest supported size and adding additional CSS via the queries for larger sizes, anything specific to the smallest size only could be defined in a max-width query.
I should also use column classes in my html provided from a grid framework which will apply % width values to my elements/components based on the value of the column class in use(media queries can change this). I'm planning on using Susy with Breakpoint (Sass libs), I'm not sure if Flexbox is a better option.
Choices aside the fluid approach with breakpoints via media queries to alter the layout for smaller screens(or browser windows) is what I'm trying to pickup, though some resources I've been pointed to seem a bit outdated or varying advice/opinions. Please confirm if so far what I've said is fine or if I've misunderstood anything.
1) With the meta tag mentioned, do PX values translate to a consistent physical size(regardless of pixel density) across screens? And is the width property being set the same property width property that Media Queries can also reference?(So it'd now be equal to device-width, or the original value is still referenced?)
2) With regards to being responsive, should I be using PX units? It seems to be suggested and used in many articles these days that I come across, though older ones a few years back were pushing EM/REM units. I've read that fonts defined with PX units don't change if a user adjusts the browsers default font size, but fonts with %/EM/REM sizes do....however EM units can be problematic due to the relative nature if you have parent elements also sized with EM units? REM I don't know too much about yet, other than it wasn't as well supported and should have a PX fallback.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width takes pixel density into account, so a device with true resolution of 640px width and 2.0 pixel density will have a browser viewport width of 320px. Initial scale ensures mobile browsers do not attempt to zoom to fit anything (for true fluid responsive sites).
Source
I am trying to make sure I properly understand the way the Meta viewport tag works when setting width=device-width.
Would it be a correct statement that when working on a mobile device with
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> usage of pixel units is (or should be) treated as if they are given on a grid that is 320 pixel wide? i.e. an element with width:160px would take up (160/320 = 50%) of the screen?
This behavior does not seem to work when running on a desktop browser,
so assuming that I want to get the same design on mobile and desktop, should/can I use either percentages or the vw/vh units?
The first thing to realize is that CSS pixels and device pixels are not the same thing. The number of pixels when you set something to width: 160px in CSS relates to CSS pixels, which have very little to do with the actual pixels of the device.
Mobile browsers (on reasonably modern smartphones) create a "fake" viewport, that is emulating a desktop-width browser size, that is also zoomed out so that it fits on the screen. The measurements for this fake viewport is usually somewhere around 800-1000 CSS pixels wide (iPhones, for example, use 980px). This is to make sure that non-optimized sites still display OK on phones, as you can zoom in on specific parts etc.
When you use the meta viewport tag with width=device-width, you are telling the device that your site is adapted for viewing on any viewport size, and that you don't want the "fake desktop" measurement.
Instead, the browser should set the number of CSS pixels that fit on the screen to what is considered the "ideal" number of pixels for that device. On old iPhones, that was actually 320 pixels. On iOS devices with a retina screen, the CSS-pixel-to-device-pixel ratio is different, so the screen is 640px wide, but the ideal number of CSS pixels is still only 320. On other smartphones, the measurement is different - usually anything from 300 - 500 pixels on a smartphone.
If you want your layout to adapt to the number of CSS pixels, you are probably better off leaving the specific pixel measurements out of it and use percentages. 50% of the viewport will always be 50% of the viewport no matter how many CSS pixels you have to play with.
More often than not, there is absolutely no need for these harmful declarations:
maximum-scale=1, user-scalable=no
My eyes are not very good and so often I find fonts used on web pages uncomfortably tiny. And what can be more annoying, if the site prevents me from zooming to be able to read it?
If you still think otherwise - please read carefully this article: http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho
Quotes from there (emphasis mine):
Declaring maximum scale
Setting a maximum scale means setting a maximum zoom. On a website where the access to the information is the top priority (most, if not all, websites), setting a maximum-scale=1 won’t allow the user to zoom. This might seem unimportant if you have a responsive website, but there are lots of cases when the user might need to zoom: small body font (at least, for the user’s needs), checking some details in a photograph, etc. Don’t trigger an accessibility issue just for aesthetic reasons.
User-scalable=no
This parameter removes the ability to zoom in or zoom out, and it’s even worse than maximum-scale. If there’s a really special reason to use it (e.g., you are coding a web app and need to avoid zooming in form inputs), try adding and removing it with JavaScript, just for the action you want to fix. Anyway, remember that smartphone users are used to zoom in and out any website, so having to zoom out after filling a form might be a default behavior and you don’t probably have to fix it.
Combo breaker
Now picture the combo-breaker: a non responsive website (fixed layout, about 960px width) with a viewport tag like
<meta name="viewport" content="..., maximum-scale=1, user-scalable=no">
Congratulations, your website zoomed to the first 300px or 400px of the top left corner, the user can’t zoom out and the only way to access the information is by patiently viewing the website in pieces of 300px width. A whole experience screwed up by an extra tag.
I want to change the look of a website on the mobile Opera browser. I use a user style to change some CSS values, this worked well for now, but the page doesn't scale to the devices full width (either orientation).
Since I will only use this for Opera anyways, I can use the Opera-CSS property "#-o-viewport"
Here's a tutorial on how to use it:
http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
The page has a fixed width, I still want the device to zoom into the website, so it's as big as possible while still showing the full width of the page.
When I'm trying this, it's not working. The page is shown with the different user style, but the css viewport property won't work the way I intended it to be, the page is shown at a zoom of about 0.4
you could do it with the meta tag viewport:
<meta name="viewport" content="width=device-width, initial-scale=1">
#-o-viewport {width: $px}
where $ = the width of the page you're trying to optimize in pixels (e.g. 800)
I have seen the option of loading different css files[called responsive web designing] for different screen sizes. But I want to know if there is some other way through which I can keep the CSS uniform.
I have to adjust the width of a title bar that should be of the same size as browser window with some margin-right
<toolbar width="some px value" margin-right="some px value">
I need some spacing at the end of the browser screen
Can I somehow get the current width of the browser screen and thus adjust my titlebar accordingly
"toolbar" defaults to being displayed as "inline". Try using "block". See this fiddle.
But I don't think "toolbar" is a valid html tag-name (I might be wrong). In any case old versions of Internet Explorer have a hard time figuring out what to do with certain tags (like most new semantic html5 tags) and won't apply any css to them.
If you feel the need to use new semantic tags and still need legacy browser support I recomend using Modernizr. Including it at the top of your page will use a small browser hack to get support for these tags even in old browsers.