My site requires at least 720px width. Iphone 6 appears a resolution of 1334x750 but their browser reports 667px. Samsung S5 supposedly is 1080x1920 but the browser reports 640.
I know the screen can handle the details but I'm not sure how to get a larger resolution. I need 720px to be the minimum width so what do I do to have phones <720px to scale correctly? By scale I mean show all 720px without any scrolling
You need to start with this in the head code <meta name="viewport" content="width=device-width,initial-scale=1">
then add media queries to you css sheet that support all current devices
http://codepen.io/mlegg10/pen/JKdOaj
If I understand you correctly, you want your contents width to be scaled down to the width of the viewport. This is usually done automatically unless the code contains the following line in the head section of the page:
<meta name="viewport" content="width=device-width, initial-scale=1">
So if this is in your code, remove it. (But note that you make your page non-responsive that way, which is rather unusual nowadays!)
Concerning your observations in regard to device pixels: This has to do with "pixel density" which is important for the better display/sharpness of text (fonts) and vector graphics, as well as images if high-resolution images are supplied to the browser. For example the iPhone 6 actually has a height of 1334 physical pixels (ratio 1:2), which is however treated as 667px when it comes to CSS pixel units.
Input this in .css code before using the code design
#media only screen and (min-width:720px)
and (max-width:1336px) and (min-resolution
Related
Im creating a website using html and css but I was just wondering whether anyone knows the difference between text sizes on all platforms.
If i create a font-size as 20px on desktop, on mobile that would look very small and you wouldnt be able to read it so is font size usually bigger on a mobile device?
Without the correct meta tag, yes the text would be super small.
...is font size usually bigger on a mobile device?
No, not typically. As in, most sites that provide a responsive version do not tell their font-size to be 80px (or whatever) so the text is not super tiny.
Mobile devices have what is known as a device width. This device width usually packs multiple device pixels per CSS pixel. I have a Samsung Galaxy S6 that has a device pixel to CSS pixel ratio of 4:1. That means there are 4 device pixels per CSS pixel. The resolution (device pixels) of this device is 1440 x 2560, but the CSS pixel resolution is 360 x 640.
When developing a site on a desktop computer and you tell an element to be 100px wide, you're actually using CSS pixels. You probably thought it was a device pixel (as I once did) because almost all desktop monitors have a device pixel to CSS pixel ratio of 1:1.
When using a responsive meta tag, like the one below, and you tell an element to be 300px wide it will take up most of the screen's width because the element will be painted on a 360 CSS pixel wide canvas, not 1440 device pixel wide canvas (which is what happens without the proper meta tag and gives the appearance of a site being "zoomed out" on a mobile device).
<meta name="viewport" content="width=device-width, initial-scale=1">
Helpful links:
Quirks Mode, A pixel is not a pixel is not a pixel
WebPlatform Docs, Understanding CSS Units
mydevice.io - displays current device settings.
mydevice.io/devices
Hopefully everything makes sense, I tried to keep it "simple."
You are right.
Have a look at EM (element units) and REM (relative element units) for sizing elements. Also adding the following code to your header might solve your problem:
<meta name="viewport" content="width=device-width, initial-scale=1">
Hi So I recently went back to a website i made a while ago using max width media query's and bootstrap 3.
I am now trying to use min screen media query's to make it fully responsive.
However even though the min width styles do get applied the screen never actually gets to those widths as it appears as the whole browser is just shrinking (like the size of a pixel) so even though the screen width may be at, for example, 320px wide within the screen the website has remained at 980px wide and is just smaller but still 980px.
So the window size is 320px and the website size is 980px? I am really confused and not sure how this is even possible.
Going off what Ankith said in a comment, you should add this if you have not already to your head.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
I am using the following two methods for a responsive website.
HTML
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
CSS
img {
max-width:100%;
}
However, when it loads on a smartphone, it appears to be too zoomed in. The widest image on this website is 240px but it takes up the entire screen on an iPhone 5 which has a viewport of 640px. How do I correct this?
Thats what the viewport meta tag does. the HTML attribute:
content="width=device-width"
Instructed the browser to configure its viewport to the devices screen width - in "dips" (device independent pixels) - not physical pixels.
In the case if the iphone 5 - I believe thats 320 px. you could test this by adding this script to the bottom of your HTML
<script>
var el = document.createElement('h2');
el.textContent = window.innerWidth;
document.body.appendChild(el);
</script>
If not familiar with dips, you can think of them as approximating the pixel density of a "classic" computer monitor as a way of getting around the fact that current device screen's have different physical resolutions, so dips were created to provide a level playing field for developers.
The CSS engine will then base its calculations on the HTML element being 320 pixels wide.
In that case an image whose width is defined in CSS at 240 CSS pixels wide would take up most of the screen width.
As an aside, in order to maximumise image sharpness most leading mobile browsers are smart enough to use the full physical pixel density for displaying the image - whilst basing its size on the CSS pixels.
When I view my website example page on on my iPad there isn't enough width really so its all a bit cramped up because many columns (especially when you expand the sections). So I twist my iPad to view the page in landscape
and instead of making use of the extra space it just makes the font larger, how can I get it to consider the extra width it now has.
Just add
html{ -webkit-text-size-adjust: 100%; }
This was already discussed here;
Preserve HTML font-size when iPhone orientation changes from portrait to landscape
Use the viewport meta tag to improve the presentation of your web content on iOS. Typically, you use the viewport meta tag to set the width and initial scale of the viewport. For example, if your webpage is narrower than 980 pixels, then you should set the width of the viewport to fit your web content. If you are designing an iPhone or iPod touch-specific web application, then set the width to the width of the device. Refer to Supported Meta Tags for a detailed description of the viewport meta tag.
Because iOS runs on devices with different screen resolutions, you should use the constants instead of numeric values when referring to the dimensions of a device. Use device-width for the width of the device and device-height for the height in portrait orientation.
You do not need to set every viewport property. If only a subset of the properties are set, then Safari on iOS infers the other values. For example, if you set the scale to 1.0, Safari assumes the width is device-width in portrait and device-height in landscape orientation. Therefore, if you want the width to be 980 pixels and the initial scale to be 1.0, then set both of these properties.
For example, to set the viewport width to the width of the device, add this to your HTML file:
<meta name="viewport" content="width=device-width">
To set the initial scale to 1.0, add this to your HTML file:
<meta name=“viewport” content="initial-scale=1.0">
To set the initial scale and to turn off user scaling, add this to your HTML file:
<meta name="viewport" content="initial-scale=2.3, user-scalable=no">
Create responsive web interface, is not merely the thrill of seeing the display changes when the browser is in big-minimize its resolution. But also accommodate the display to be able to perform comfortably in a variety of devices, browsers and resolution.
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
html { -webkit-text-size-adjust: 100%; }
}
These are proper media queries to limit this particular css to only iPad in portrait and landscape. Doing it this way shouldn't have any effect on your desktop view.
I am building a responsive website which will be running on smartphones like iPhone having high pixel density screens. I know that in order to maintain legibility, mobile phones' browsers report a resolution half that of actual screen resolution.
I searched about this and found that this behavior can be controlled by using css media query of device pixel ratio (for e.g. #media screen and (-webkit-min-device-pixel-ratio: 2) ) for iPhone.
I tried using this by putting my entire css code within this block, but my iPhone still displayed the page exactly as it was displaying it without using this media query.
How can I force iPhone and other high pixel density mobile phones to display my webpage at its actual resolution? i.e. for iPhone 5, it should display my webpage at 640px*1136px and not 320px*568px as it is now showing. I know that this will make my text appear smaller, but I still wish to format my webpage like that.
I am using the following meta code in my HTML:-
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
Thanks.
Putting your CSS rules in the media query doesn't affect how the browser renders it, if you don't change the CSS rules. You could try with something like this:
.element {
width: 100px;
}
#media -webkit-device-min-pixel-ratio: 2 {
.element {
width: 200px;
}
}
Basically you can explicitly double the size when the device pixel ratio is double. Unfortunately with this technique you have to use a different media query with different sizes for all possible pixel ratio that you have to deal with.
Otherwise you can play with the width attribute of the viewport meta tag. If your page has a fixed-width layout, you can set its width as viewport width. For example if you have use a "standard" with of 960px, you can use the following meta tag:
<meta name="viewport" content="width=960px">