I have a native mobile website which should work on different viewport sizes, but instead of changing the attributes with media queries I want only to change the initial scale of the website.
How can I change the initial scale for different viewport sizes?
Works it with media queries?
You can do this with javascript, I have done something similar like this:
if (document.documentElement.clientWidth < 480) {
document
.querySelector("meta[name=viewport]")
.setAttribute('content', 'initial-scale=0.4', 'maximum-scale=0.4', 'width=768');
};
This is for a site that is designed for iPad but I want it to scale out for iPhones etc..
Probably the most common way of setting the the "initial scale" is by instructing the browser to use the width of the device as the width of the viewport:
<meta name="viewport" content="width=device-width" />
To follow on to your secondary quesions, yes this obviously works well with varied viewport sizes by setting the viewport width relative to the device width, and is compatible with media queries.
This article provides further detail: http://tech.bluesmoon.info/2011/01/device-width-and-how-not-to-hate-your.html
Related
Please see the simple snippet. I am using chrome 58.
While i turned on device mode, iphone 6 (375*667px), computed width
shows:490px.
While i turn off device mode, and narrow down the viewport width to
exactly 375px, the computed width shows 187px.
why is that kind of difference?
div {
height:100px;
background-color:green;
width:50vw;
}
<div></div>
This isn't specific to Chrome, but rather because screen resolution is not equal to browser window size. The CSS unit vw stands for viewport width, and is relative to the viewport. This is your screen minus the reserved space of the browser chrome. Keeping in mind how many different devices and browsers there are, this reserved space can differ greatly. For more information on this, see Screen Resolution != Browser-Window.
To work around this, you can set the viewport width in the <meta> to be measured off of the device-width:
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width" />
It's also recommended to use media queries to target specific breakpoints. If you want to get fancy, you can even target specific devices. To help with this, WebSiteDimensions has a nice chart illustrating the various different 'safe areas' for different devices.
Hope this helps! :)
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
In my app I use Bootstrap and I set 2rem to my h2 element and 1.7rem to my h3 tag. Even if I adjust the browser width in my desktop (to the size of a mobile) the h1 is bigger than h3 which is what I want. But if I use the developer tools to switch to a mobile device view or view the site from my phone the h1 becomes smaller than the h3! What might be happening in here? It happened in multiple sites I created.
Example fiddle (Could not replicate the issue in the fiddle. But it's the code) : https://jsfiddle.net/gor87kg6/1/
The live site which have the issue : http://jayatours.lk/
Following the Bootstrap mobile first approach I noticed your website was not utilising the viewport meta.
Try adding the following to the <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
Background Information:
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.
Viewport Information:
The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width value which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)
I believe this may be the cause of your issue as the use of rem seems to be correctly implemented. It might be more likely down to the dpi/ screen resolution of the mobile/ tablet device itself.
rem is a unit relative to the font size of the base (html) tag. The default in browsers is usually 16px if you haven't explicitly declared it. Perhaps the mobile browser has a smaller default?
Try setting the base font size before using rem units:
html { font-size: 16px; }
I don't see any issue. If you still see the issue then there could be 2 ways to resolve this:
1) See that the h1 font-size is not being set again in the media query
2) Check the base font applied to the html & whether it is being reset in the media query
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">
Researching viewport behaviour, I've hit a bit of a snag in understanding the meta viewport declaration.
I see width=device-width and initial-scale=1 used together a lot but, as far as I can tell, the latter implies the former.
MDN also mentions that defining both a width and initial-scale=1 will result in the width acting as a minimum viewport width. If this is the case then is there any need to define the width as device-width? Surely the initial-scale can't be 1 with any layout viewport smaller than the device-width anyway.
Am I missing something or is defining the width as device-width redundant here?
Thanks
Using both width=device-width and initial-scale=1 ensure cross browser/device compatibility. For example, for iOS devices, initial-scale=1 is needed for your page to pick up on orientation change of the device as width=device-width will not. Using both ensure maximum effectiveness using the meta viewport tag.
The 2 tags are not the same.
The 'width=device' tag tells the browser to use the device's real width as the 100% width of the screen. If you omit it, a mobile device will simulate as if it has higher resolution and your content will not be stretched to full width.
The initial-scale is the zoom level on first load. If it is set to 1, along with 'width=device', then the content will not be zoomed out or in. You will also not be able to zoom out more than the initial scale (but you will still be able to zoom in). That will be as if you set 'minimum-scale' to 1 as well.
There is also a 'maximum-scale' and if you set it to 1 as well, the user will not be able to zoom in more than the initial scale.
This is an example of how you can create an 'app-like' feeling, where the content uses the device's width in a 1:1 ratio.
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
Hope this helps!