Hello,
I created new React App a few days ago and I have a problem.
All elements are bigger, than on the design although it is the same size (1920x1080). And that's because my default system scale is 125%. When I have changed it into 100%, it worked fine. But I want my app to be well displayed on all my users devices (even if they have scale 125% as system default).
In my index.html I have this line:
<meta name="viewport" content="width=device-width, initial-scale=1" />
Do you know what's the problem with it?
As Codesigner mentioned, changing the scale via the web browser changes the width and height of the window (i.e. window.innerWidth and window.innerHeight). The browser then renders the webpage onto the window and scales it to match the dimensions of the viewport.
From the viewpoint of your website, this is equivalent to a change in the size of the browser's window which means you should handle it with CSS media queries.
But keep in mind that users making use of the browser's zoom functionality are likely to have a reason to do so (e.g. bad eyesight) meaning you shouldn't scale down your website when a user actually wants to scale it up.
In addition, it is not possible to detect whether a user uses the zoom functionality or actually uses a device with a different physical screen resolution. You might break the responsiveness of your website.
when you change scale it updates logical resolution of system. setting it from 100% to 125% it reduces screen width for media query.
Try to handle ot using CSS media query.
Related
Since updating my PC to Windows 8.1, I have been experiencing an issue with font size on several websites that I have designed when displayed on Chrome.
Nothing has changed with the design of the sites.
My navigation is breaking because the text is now too long for the menu bar. Having done a few searches, I found an answer on the superuser forum relating to HiDPI.
https://superuser.com/questions/803601/text-size-suddenly-got-bigger-on-all-sites-on-google-chrome
The answers posted to this question relate to solving the problem on users' local machines. I'm unsure if this occurs on all machines running Windows 8.1 viewing in Chrome. If the problem is a bug, how do I resolve it?
Here is a JSFiddle which is still showing a broken display on my screen.
no code to accompany thisJSFiddle
(Please remember that this may display correctly if you do not experience the bug. If the bug exists, the last menu item will appear below the first)
Should I decrease the size of my menu fonts, and affect the design of the site, to guarantee the menu functioning correctly?
I need a fix for everyone experiencing this problem, not just me.
Does anyone know of a fix?
Your best option would be to make sure that the viewport is set to the default of 0 and that the core font-size is set for all elements.
Viewport
<meta name="viewport" content="width=device-width, initial-scale=1">
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.)
The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalableproperties control how users are allowed to zoom the page in or out.
Viewport MDN
Font
* {
font-size: 16px;
}
This will set the font-size to 16px across all of the elements and will override whatever the user's browser default font-size is.
Both of these used together should help in some way to making sure that all browsers and device types render your page as expected.
You can use a mediaquery that detects pixel density and change the font-size for this dpi, with this, users that hasn't the bug were not affected.
(Started over my question because people downvoted and locked it because I didn't add pictures ... so here we go, since I got the answer from other sites, and this is actually important to large scale responsive sites, I also provide the answer)
I am trying to overcome the pixel density (real vs hardware) of viewports, that basically breaks/collapses Bootstrap sites even on huge tablets just because they have huge resolutions (alas, they default to a huge zoom, which causes bootstrap to collapse the content even though it would fit).
Here, Bootstrap own site, Desired effect:
But, instead, even on devices with higher resolution, I get this:
The reason is the viewport standard, that "enforces" a zoom according to dpi to prevent sites rendering too small (example: a 12px font on a 400dpi device would be almost unreadable). However, I would like to let the user decide if he wants to zoom or not, and not be constrained to the hardcoded zoom (example, my xperia Zq with 1920px have a hardcoded 220% zoom, leaving less than 900px of viewport, which will collapse bootstrap out of responsive mode).
Tips?
As per the specification of the viewport (which is still a draft but most certainly will become a standard soon, reference can be found here: https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag), if you set a fixed value to the viewport width, that does not mean the viewport will have THAT width, but that the viewport should have AT LEAST that width. So, for instance, if I set the viewport to 1000px, than the viewport WILL be enlarged to that size, causing a smaller zoom, and also causing bootstrap not to collapse.
As per the specification, if the device cannot enlarge the viewport to the requested size, it will enlarge to the maximum possible size (alas, the real pixel width of the device), but will still enforce a zoom, probably causing the collapse.
So, the solution to prevent the collapse on a site that can handle a screen, say, 768px (Bootstrap's definition of tablet), is:
<meta name="viewport" content="width=768, initial-scale=1">
This will prevent the collapse if the device have 768 or more real pixels, while collapsing otherwise, thus the site will show just like it would on a desktop if there is enough rooms.
why do that?(a.k.a. pros)
The mobile version on such high dpi devices will look like the desktop version and won't collapse even though it clearly can handle the site
The responsiveness will remain on those devices, instead of auto-collapse whatever mobile it is due to the high viewport constrains (often above 200% zoom), you are only changing the default "start zoomed" to "start unzoomed"
why not? (a.k.a. cons)
By reducing or disabling the zoom effect of the viewport, fonts and other components will render on "real size", which on a high dpi device might be too small (like a 12px font on a 400dpi is almost unreadable) - yet, the user still has the freedom do zoom in, which will cause the site to collapse as needed just like if you resize a window on the desktop version. This solution, therefore, does not break anything, just change the default behavior.
On really small but high DPI devices, this is still annoying since you will have to zoom every time, so the size you specify should really be the SMALLER possible size, and not just, say, force the device real pixel count and totally disable zoom
I have a responsive website that I think looks best when it's 500px or larger, so I set the min-width to 500px.
However, I'm testing it on a 320px phone and pages have horizontal scroll, forcing me to zoom out if I want everything on the screen.
Is this a device issue? Or is there some code I can use to make my site shrink by default? (instead of having to zoom out each time I navigate to a new page)
<meta name="viewport" content="width=device-width, initial-scale=.6">
Then just adjust scale to fit what you need
I used bootstrap in my pages, it save you this hassle, try it it is very helpful in many ways.
from here.
and also has many other futures.
this is a google search for free wordpress templates.
This question already has answers here:
Android viewport setting "user-scalable=no" breaks width / zoom level of viewport
(3 answers)
Closed 8 years ago.
I'm having some problems getting my website to scale correctly for mobile devices.
We have a site that's designed to be a minimum width of 640px, maximum of whatever. I have the meta tag currently:
<meta name="viewport" content="width=device-width;minimum-scale=0.5,maximum-scale=1.0; user-scalable=1;" />
Now - The part i'm confused about is that if I use "initial-scale=1.0", obviously the site will scale 1:1, and it will look crappy on an iphone 3Gs (will only see half the site). Now, on an Iphone 4, (having a 640px wide resolution) it will be scaled properly at 640px if I use "initial-scale=1.0".
Alternately, if the graphics are 480px, 3Gs would require scale=.667 and iOS 4 would require 1.3, correct?
So how do you get the site to fit perfectly edge to edge? Can the browser detect the device width and then set the scale accordingly?? There are lots of different device widths out there... android, older iphones, blackberry's etc.
Getting quite frusterated :( Feel like i'm missing something important that I should already know.
Edit It seems that the 'initial-scale' meta tag should be scaling the site relative to the viewport, then using width=device-width to set the actual viewport size.
The problem I seem to be having is that the viewport isn't scaling to fit the device, it's staying at 640px no matter what tag I use. What am I missing here???
I think the main issue with the original message is that semi-colons don't appear to work on iPhone 4+. It only works with commas as separators (or only the device-width setting). Other browsers seem to be more tolerant.
The following works reliably for me:
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1" />
You'll also want to disable the body and document from scrolling horizontally:
body, html
{
overflow-x: hidden;
}
Good link for more info on Mozilla Site:
https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
"width" is to tell the browser how wide your website is at 100% zoom. if you have designed your website to be fluid, you could specify "device-width" here, and the browser won't need to use any zooming, as your layout is designed to fit any viewport width.
"initial-scale" is for overriding the default behaviour of some devices to zoom in or out on your website so that the website width (which you specified above) matches the screen width. setting this to 1 basically says "don't zoom for this, use scroll bars if my website is too wide for the screen, and leave blank space at the sides if it's too narrow". if you do want your website to fill the screen width exactly, don't use initial-scale.
Ok, i've figured it out... essentially.
Because my design is actually 2x the size of the viewport (sort of), the key is just to use "initial scale = 0.5". It works correctly on both devices (3Gs and 4), and more or less correctly on android devices, etc.
Kind of tricky, and it seems like there should be a better way to do this, but for the time being, it works.
Thanks all who provided input.
I believe that the answer is that you want to tell the web browser to always scale the site to 640 pixels. I would even turn off the ability for users to scale the site so that stray drags don't re-size everything.
Try this:
<meta name="viewport" content="width=640; user-scalable=no;" />
I'm in the process of building a support page for my pre application.
I'm having a problem where the content on the page is very small, so the user has to manually zoom in to read it.
I've made the page so that there is nothing very wide or tall, but for some reason everything is very "zoomed out" when you first navigate there on the Pre.
I've noticed that sites like wikipedia have versions that are perfectly optimized for the Pre. How can I make my pages start out "full-sized" the way wikipedia does?
Update:
The extremely simple page that I am currently testing with.
On the above page I have tried setting the width for every element to both 310px and to 100%, the result is always the same.
I figure I can accomplish this by giving everything a static width and then making everything use a very big font size. I'm just guessing that there is a "better way", i.e. some way to let the pre browser know that it doesn't need to start zoomed out to the size of a "normal" web page (it seems that the default zoom is about 1024px wide, even though the actual rez is 320px).
I found out the proper way to do this on the webOSDev forums.
The following should be in the header:
<meta name="viewport" content="width=device-width"/>
<meta name="viewport" content="initial-scale = 1.0"/>
This has the advantage that when the user turns the device into landscape mode, everything scales appropriately, without any styling gymnastics.
Posting a URL of a problem page would be a big help here.
In general, to show nicely on smartphones, the design of the page has to be "fluid" (taking 100% of the width in percent - not specified in pixels) to use the most space in differing screen resolutions. The minimal width supported by the design should be about 300 pixels, to fit without zooming on 320x480 screens.