I'm creating responsive web app for desktop and mobile devices. My problem is I don't know when I need to use *-device-width. Pls explain usecases for *-device-width. Why should I use it instead of *-width?
You use it with a meta tag, which you will add to your head tag
<meta name="viewport" content="width=device-width" />
From Difference between width and device-width in CSS media queries:
device-width is the...
width of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).
Source.
The width...
describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page
box on a printer)
Source.
Related
I am using css media queries to make a web page (currently not published) responsive. However, in Chrome Inspector mobile device mode, the site is not response. However, if I physically resize the browser window, it is responsive.
The media query begins like:
#media screen and (max-width: 767px) {}
Put this in the <head> of your page:
<meta name="viewport" content="width=device-width, initial-scale=1">
The viewport meta tag simplifies something that's pretty dicy, directing the browser to behave a certain way, instead of the browser trying to estimate what the right way to display a page is. Having CSS breakpoints, as you discovered, may not be enough--for some designs and browsers, it will be fine, but it's up to the browser.
width=device-width uses a custom value (device-width) that is what it sounds like--set the width of this viewport to how wide the device is. initial-scale means something like setting zoom to 100%. So, together: let the viewport be as wide as the device, and don't zoom in or out.
So I have my website here: http://easenhall.org.uk/index.html
If you were to reduce the width of the browser window it changes from desktop view to tablet view, then if you keep going it will change to mobile view.
It works on desktop browsers but if you were to look at the website through a mobile it will always display the web page in tablet mode. I cant figure out why.
If you inspect the desktop webpage and press the toggle device toolbar button and try to resize the page to a mobile view, you get a similar effect, it stays in tablet view.
I have checked the console and there are no errors displayed there, I cant find anything wrong with it. Any help would be appreciated.
Try to add this to your <header>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
You have to use this meta tag after the title tag, otherwise responsive does not work
<title>This is title</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
By way of background, when Apple introduced the iPhone some time back, they anticipated the problem that nobody at the time was writing pages designed for the small screen. This included the relatively new Media Queries, which was at the time still not widely supported.
They made the decision to scale the whole screen from a larger version to the small screen. It wasn’t easy to read, but at least you could see see where everything was, and you could always zoom into the interesting part.
The scaling was achieved by creating a viewport, an off-screen virtual screen, set to a width of 960px. The page would be rendered there, and scaled to the smaller physical screen.
It also meant that CSS media queries would get a reported width of 960px, and thus would not trigger alternative styles.
Apple also introduced a non-standard meta property called viewport, which gave the developer some control over the properties of the viewport.
The most common use of the viewport property is set the viewport size to the same as the physical screen. The viewort would then report a screen size which is more correct, and CSS Media Queries can do the rest. Effectively, the viewport is commonly used to undo the scaling effect.
Desktop browsers never had this issue to begin with, so the viewport is really just the browser window. That is why the desktop always tests as expected, because what you see is really what you get.
This is what vuejs (and probably other frameworks) is doing "under the hood":
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Setting exactly this tag in the header will lead to your desired result.
My site uses bootstrap 3 to accommodate devices of varying screen sizes. I use bootstrap's hidden-xs class to hide my page's unnecessary background image on small devices allowing them to focus on the important input components without having to zoom in. This works fine if you resize the browser window or adjust your monitors resolution. It also works great on low-res phones like the iPhone.
However, since bootstrap uses screen pixel size, this does not work on android phones with high resolutions. The result is, the phone user has to zoom in or work hard to select the appropriate inputs as they appear small on the phone's physically small screen.
Is there an easy fix for this so that users with high-res phones don't get the same look as the desktop users?
Thanks!
You can use this meta tag
<meta name="viewport" content="width=device-width, initial-scale=1">
in the <head> section of your HTML document, to scale the document based on the screen width of the device you are using.
Check MDN for more information about the viewport meta tag and its usage.
I have built a new template for my website that re-arranges the content so that the sidebar is moved to the bottom in the event a small screen size (<801px) is detected. In an effort to make this as simple as possible I have reduced it to html and CSS. The issue is the phones claim to have more screen size than they do and they choose the full size display anyway. Also if I specify the media type as "mobile", the phones seem to deliberately ignore it. Is there a better way to target the mobile phones (ie android and iPhone)?
You may need the following meta tag in your head:
<meta name="viewport" content="width=device-width">
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)