I'm making a web app I've built responsive. I haven't been able to get some of the screens to get any smaller than 360px wide. But many smartphones are trying to display it at 320px wide. How do make it so it'll be responsive down to 360px but no less?
UPDATE: Prior to posting I had already specified a viewport tag of:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
And, I set a min-width for the container of 360px.
The issue is that in doing this, 40px on the right are hidden when the user first visits the site as IPhones and many others default to only showing 320px even though they are capable of showing more. I know they can zoom out but I'm wanting it to show 360px wide at load time.
So definately add in the following viewport meta tag in to the head of your html document:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
You'll need this to really do any responsive work on phones or tablets.
I'm not sure if you want your width to get no wider than 360px or you are stuck at 360px and want to make sure it decreases all the way down to 320px.
If you want it be no smaller than 360px...
You want to have your "wrapper" element be fluid only down to 360px you can set a property on your wrapper div (or whatever element is controlling the width of your site) in CSS to say min-width: 360px;. This will make it so the wrapper element doesn't get any smaller than 360px wide.
If you can't get it to resize smaller than 360px and want it to... This is kind of the reverse of the above. Maybe your wrapper element has a min-width: 360px set. In that case you can remove that property which will allow it to scale narrower than 360px.
I haven't tested this alteration of the viewport, but give this a try.
<meta name="viewport" content="width=device-width, min-width=360, initial-scale=1.0" />
What I'm hoping it will do is make the width equal to the device's width, unless the device's width is less than 360px (aka the iphone) in which case make the width 360px.
Your best bet though is to really switch up your mindset a little bit and use a media query to adapt your code for the best presentation at 320px wide. So let your site be displayed at 320px wide but change the css so the site fits nicely at that width.
For instance:
#media screen and (max-width: 360px){
.wrapper {
width: auto;
}
//change some font sizes
//put float: none on a few elements that were previously floating
//change a few widths of container elements to auto
//etc.
}
The css inside the media query will only get applied if the device is 360px or less.
Related
An issue I have with maps on mobile devices is that sometimes when trying to zoom in the map I zoom in the viewport instead - so that the map and text become larger. This happens mostly with inadvertent double taps when out and about, but sometimes happens with pinch zoom. It means that my controls (at the bottom of the viewport) disappear. It can then be rather tricky to (pinch) zoom out the viewport to get the full view of my app back.
The problem is easily fixed by inserting user-scalable=no in the meta, thus:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
But apparently this is a no-no: http://www.w3.org/TR/mobile-accessibility-mapping/#zoom-magnification section 1.4.4
My app is subscription based, and I think the issue of inadvertent viewport zooming is worse than not allowing subscribers to zoom the viewport. So I've left the "user-scalable=no" for now, but am curious to know if there's a way users can say increase zoom on forms but not on maps.
Thanks in advance
Mini
Simple: don't mix your map with other content. Make your map the full screen when you want to zoom the map and then turn off the map zoom when the map is not the whole screen.
There is no other way, because when you zoom your map, you need to call preventDefault, which also disables the standard pinch to zoom.
Note that the documentation says that it should not, that it must:
Restrictive values for user-scalable and maximum-scale attributes of this meta element should be avoided.
When we have a web application, we do want the control to stay at the bottom when we pinch zoom the viewport, like a standard web browser always have its menu bar visible when we zoom inside the content. Web app controls are not part of the content.
Then, you can have a restriction on the viewport size for the full window, as long as your main content (here the map) is scalable.
This will require that your content will always be in an iframe which has no restriction on its scalability.
Your can (and should?) perfectly consider using a font for your controls which is at less 200% of the initial content text size in order to fulfill WCAG recommendations (or must? Definitely).
samsung s5 display:1080 x 1920 pixels but in my media query at this screen size target
#media handheld, screen and (max-width: 970px) {}
the image show the problem:
by the way I used this meta tag inside head tag
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
The "px" unit in CSS doesn't actually mean a physical pixel on the screen. It's a device-independent unit that refers to the (approximate) size of a pixel on a traditional PC monitor, and browsers are expected to scale it appropriately when rendering to a high-DPI device like a printer or a modern "retina" display. So although your phone's screen is 1080 physical pixels wide, it's far fewer CSS pixels wide.
The exact definition of the "px" unit has varied across CSS versions, but all they all define it with approximately the same physical size. CSS3 says "1px is equal to 1/96th of 1in" — the size that a physical pixel would be on a 96dpi monitor.
Wikipedia says that the Galaxy S5's screen is 2.85 inches wide. With 96 CSS pixels per inch, that'd make it about 274px wide from a CSS standpoint.
I've really got no clue how to describe the subject in English, so here is more info:
Check my (temporary) website on your phone (no matter what kind one) -> Click
What you'll see is the whole site including the background spread over your screen, instead of focussing on just the container in particular.
My only question is: How do I let the screen focus on the container, instead of the whole site. By other words: Ignore the background and spread the container over your whole screen.
Quick mockup:
What is the best way to achieve it, so it adjusts it to the whole screen of your phone?
Thanks!
Try this:
<meta name="viewport" content="width=device-width">
This will "zoom" your device to a reasonable value. ("reasonable" still depends somewhat on the vendor.)
In your case you can play around with device-width parameter and enter a value which suits you. But better stick with it for the time being.
Starting from this you can create different css styles via media-query and e.g. specify
#media (max-width: 400px)
.my-content-div {
width: 100%;
}
}
to scale your content to 100% on mobile devices.
Making a true responsive design is still a big mess but it can be done. Key is, that you start with something you can at least loosely rely on and then work your way from there.
If you want to make it responsive I think the best solution is by using Media Query instead of adjusting the viewport. Set #container to 100% width and height and set the margin to 0.
I have a responsive website. I already have...
<meta name="viewport" content="width=device-width, initial-scale=1"/>
...in the header. The website doesn't just scale everything down automatically to fit on a smartphone screen. It maintains the proper size of my DIVs (whether they be fixed or percentages) and I design my elements to fit accordingly.
However, on one page, I have an interactive diagram with several elements. These are blocks (with text inside them), and they have to maintain fixed widths. The problem is, these fixed widths are much larger than smartphone screens. It's about 1000px wide.
I can't make this div percentage based. It has to be at least 1000px wide and maintain that size on every device. Obviously, this means that it will not fit on smartphone screens.
What I would like to do is continuing using...
<meta name="viewport" content="width=device-width, initial-scale=1"/>
...for every other element in my website, except this one DIV. I need to scale the entire parent DIV, its child DIVs and the text inside of the child DIVs.
I have tried the CSS "zoom" property. But, it doesn't scale the text properly, and the widths of the child DIVs don't seem to "zoom" equally. They get out of alignment.
How can I conditionally apply that meta viewport tag to everything except this specific, fixed width DIV?
you need to write a css media query where your page breaks to adjust the div and its nested elements
here is a css3 media query template gist you can use https://gist.github.com/marcobarbosa/798569
or better yet, I would use bootstrap's responsive grid http://getbootstrap.com/2.3.2/
Disclaimer: I'm not exactly certain this is what you're looking for and I don't have enough rep to ask for clarification in a comment, so here's a possibility...
<meta name="viewport" content="width=1000" />
...where "1000"px is the fixed width of the div you're looking to contain. By omitting the "initial-scale" attribute, the device should figure out the scaling it needs to apply for itself.
I develop a simple mobile page; the font displayed is very samll although I set it as 33px and the screen resolution for iPhone is 320 X 480.
Does anyone know why it is so small?
Or the screen resolution is not 320 X 480 since it can be zoomed. Then how do I make the font to be adapted to the resolution automatically?
Safari can be zoomed in and out, so a CSS pixel doesn't always equal a screen pixel (especially when the iPhone 4's denser screen comes out - you wouldn't want your website to be 1/4 the size just because there are more pixels stuffed into the display!).
You can turn off Safari's zooming with a special meta tag, as described in the Apple docs:
<meta name="viewport" content="user-scalable=no, width=device-width" />