So, I built my site in desktop form before doing mobile form. I saw that changing the initial-scale less than 1, for my case 0.6 (60%) works great! Is there any known side affects for people if I use this low scale? It seems fine with chrome inspect with different screens, and I just wanted to make sure this is good incase I post this to the internet.
60%:
60% (0.6) initial-scale
100%:
100% (1.0) initial-scale
I tried many scales, 60% worked best coming from desktop form. I'm currently concerned if using a lower than default initial-scale is good for everyone.
It's generally not recommended to use an initial-scale value of less than 1. This is because doing so can cause the content of your website to appear smaller than intended on mobile devices, making it difficult for users to read and interact with your site. It's generally better to use a scale of 1 or higher and responsive design techniques to ensure your site looks good on mobile devices. This will help ensure that your site is accessible and easy to use for all users, regardless of their device.
Related
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.
I'm putting together responsiveness for a client of mine (the site is using Bootstrap 2) but I'm having an issue. When I visit the site on my mobile device (HTC X8) I notice that it isn't really zoomed in to where it would look good.
Here is the link I'm using, and the result on my phone: http://www.gigee.me/draft/index.php?/account/login (if the site redirects you to just gigee.me, type in the rest of /draft/index.php?/account/login and it should work)
However, I want it to be more zoomed-in. Just like it looks when you are scaling down in a browser.
I think this might be a simple fix. I believe most of my HTML and CSS is correct.
I would really appreciate any and all help with this.
Most mobile devices utilize what is called a "virtual viewport". Essentially, what this means is that even though the device itself is relatively very small compared to a regular laptop / desktop monitor, it still displays at a high resolution. For example, newer versions of the iPhone and iPad both display at a virtual viewport of 980px. So even though you have a Bootstrap 2 responsive website with breakpoints at 768px and 980px, your phone is actually displaying the website at the desktop or tablet version since its virtual viewport is most likely higher than its actual viewport.
What you need is to detect phones (and tablets if you choose) and tell the document to render a viewport zoom if the user is using a mobile device.
In your HTML head tags, add the following
<meta name = "viewport" id = "viewport_device">
Then include the following JavaScript in your document after the jQuery library reference
if(navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/IEMobile/i)){
$("#viewport_device").attr("content", "initial-scale = 0.50");
}
else if(navigator.userAgent.match(/iPad/i)){
$("#viewport_device").attr("content", "initial-scale = 1.00");
}
The IF statement will detect all major mobile browsers. If a phone is detected, the initial-scale is set to 0.50. This is essentially telling the browser to zoom in 50%. If an iPad is detected, then the initial scale is set to 1. Depending on your page, you might want to play with these values to see what values look best for your site.
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;" />
What special meta tags, CSS, etc. do I need to take into consideration when making my website ready to look and function right in Safari Mobile.
I didn't take much consideration to Safari Mobile until I got an iPad. I noticed that the sites I create do not always re-size correctly, look well formatted, etc. Nothing major as I am largely a front end developer.
I searched through StackOverflow and have not found a real specific outline of Safari-Mobile considerations
I am assuming that your site is already designed in a fluid manner. One of the big things for me was this:
<meta name="viewport" content="width=device-width" />
This sets the size of the viewport so when orientation changes it resizes the viewport which allows your design to reflow to the new viewport size.
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.