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.
Related
When resizing the browser to the width of different mobile and tablet screens, the font seems fine readable and big enough, but when i check the website on my tablet the font seems smaller and not enough readable.
I thought that the browser is a real indicator of what the website should look like in smaller screen devices, but this seems not the case, as font looks small in my tablet screen.
So why font is not shown on the smaller devices as the same as the browser when resized to the same size??
The viewport meta tag tells the browser that your site is responsive ready and allows the browser to scale your site to device pixels rather than actual pixels. This should emulate a narrower viewport with the content appearing larger on screen at a more natural size. This tag should be placed in the head section of your HTML file.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I'm a relative newcomer to CSS, and I recently figured out how to use #media to query for a device or browser size, and help make the site responsive, but I've been having a lot of trouble with the <meta name="viewport"> tag (as I see a lot of other people have too).
The shift to the mobile view triggered by #media only screen and (max-device-width: 680px) is working just fine, but so far, on both iPhone and Android phones that I've tested it on, the initial view is partially zoomed in. For the mobile view version, I have the body, the container div, and the child elements sized at 540px or less and then used the following tag in the head of the html doc:
<meta name="viewport" content="initial-scale=1, width=device-width" />
But like I said, when I visit the site on a mobile device (like my Razr M, which has a screen resolution width of 540px), the viewing area shows up zoomed in, so that what I see is about 2/3rds of the full 540px of content, starting from the left. But then, if I manually zoom out, it stops at the correct size and everything looks good. The test site is up at http://thereisnomountain.com/indextest.html, and it relies on one stylesheet at http://thereisnomountain.com/style/tinmtest.css. Help would be appreciated!
I'm working on a project where we are looking to deploy a responsive mobile version of a website for a client - in this scenario the existing 'desktop' site has two breakpoints:
>= 980px
>= 1200px
On devices with screens smaller than 980px the 'small desktop' site is just scaled to fit the browser so users are able to tap to zoom etc and effectively navigate the full desktop site.
We now want to implement a version of the site for small screens (<480px), however the problem I have encountered is that by changing the meta viewport tag to accommodate a breakpoint for a 1:1 layout on small screens I've lost the ability for users with screens between 481px and 979px to use a scaled version of the desktop site.
Previously I was using the meta tag:
<meta name="viewport" content="width=980">
But as I understand it to have small screen devices scale the layout correctly I need to adjust that to read:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
What I really need of course is a mixture of both! - Any ideas?
Had a similar challenge with http://blakelondon.co.uk - native scaling on devices larger than mobile, than responsive on mobile.
Your issue is the reverse of mine but I think the same approach would work.
The solution uses JavaScript to rewrite the meta-viewport to a fixed width to force native device scaling. Caveat - it comes with the very minor drawback of a layout reflow in one of the contexts.
First set the meta-viewport as normal:
<meta name=“viewport” content=“width=device-width” />
Then, sprinkle in some JavaScript to rewrite this value to a fixed width to force native scaling on smaller devices (pick screen.width to suit):
if (screen.width <= 640) {
viewport = document.querySelector(“meta[name=viewport]”);
viewport.setAttribute(‘content’, ‘width=980’);
}
Hope that helps!
P.S. My colleague #cole007 also broached this issue, with slightly different code:
http://cole007.net/blog/136/responsiveish-viewport-hack
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'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.