I'm developing the mobile version of a web and the client requested me to allow zooming.
The problem is that in some browsers (like the iexplorer of windows phone or the browser of android) it makes a normal zoom without resizing the window, so the elements simply are viewed bigger, but in other browsers (Safari on ios or chrome on android) it makes a "responsive" zoom, resizing the window and adapting the elements to the new size, changing their positions.
The client has seen this inconsistency and he likes the first type of zoom, so he asked me if i could make this "non responsive" zoom working on all the devices.
I have been researching how to do it but i didn't find anything about the browsers making different zooms or how to avoid the second type of zooming. So if anyone could explain me anything about this i would be very grateful. Thanks.
Add this to your HTML inside the <head> tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Related
So I had the problem on mobile described in the following question: Mobile scroll offscreen :
When an object would go offscreen, it seems to increase the total width/height of the website, so the object stays on the screen. I implemented an animation where an css objects leaves the screen and then reenters from the other side.
Following the answer to the mentioned question, I added <meta name="viewport" content="user-scalable=no"> to my HTML file.
That problem is solved, but now it will ignore the ccs code
text-size.adjust: auto;
text-size-adjust: 60%;
, so my layout is now messed up on mobile (before adding the HTML it worked perfectly fine).
Is there any way to prevent the offscreen behavior without blocking the text-size.adjust ability? Hiding the part that is offscreen would help to.
I use Google Chrome (Version 94.0.4606.85) on an Android (Version T810XXU2DRH1/T310DBT2DRH2) Tablet (Samsumb Tab S2 SM-T810)
I'm happy about every helpful answer
Looking into the viewpoint deeper on this website I found out that <meta name="viewport" content="width=device-width, initial-scale=1.0"> will set the width of the viewpoint to the device width (so no offscreen viewpoint, I assume that's possible with height too, but I didn't try) and set the zoom level to 100% when the website is loaded.
I'm building a web app and have been trying to sort out some mobile first design, if I scale my chrome window down, the page is responsive and works well, scaling objects down to a suitable level.
However, when I set it to a mobile view-port (by clicking inspect-element and then clicking on the icon of a phone) the page does not scale down accordingly - how do I know what my page will look like on a mobile device? Will it be the same as when I scale down the page in the web browser window or will it be like when I open a mobile view-port?
You probably need to add <meta name="viewport" content="width=device-width, initial-scale=1"> in <head>.
The default behaviour of mobile browsers is to act like a fairly big window, because non-responsive websites would freak out at the actual size of the phone. This tells the browser to use its true size instead.
I'm making a prototype sight currently that is static (as in when the screen is resized smaller such as 480 pixels the sight does not responsively adjust its elements ). I actually don't want the sight to be responsive I want it to behave as apple.com does. Apples site is a large zoomed out overview of the site allowing the user to zoom in on what he/she wishes to. Whenever my sight is loaded on my iphone it is zoomed in to a tip corner of the site. When I apply zoom:.5 to the css it zooms out just as much as i would like it to in IE and chrome but does not in Firefox. Obviously that's a major problem being firefox is a very popular browser and i am having difficulties finding an alternative. If any one could offer any amount of alternatives (even using javascript) it would be much appreciated.
If I understand you correctly, you need to set the viewport meta.
Add the following to the head section of your site:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
This will set the initial zoom to fit the entire page, while allowing users to zoom as they please.
this is quite easy...
just do all your code in old fashioned pixel measurements
and nothing will resize and it wont be responsive at all
I am trying to fix some layout issues with browsers on tablets. And currently the browsers on surface and Android works okay, but there are some problems with Ipad.
This the main page displayed by an Android Tablet browser:
And this is the main page displayed by Ipad (safari and chrome)
The webpage is using bootstrap and the URL is http://hra.case.edu.
Here is my meta tag
<meta name="viewport" content="width=device-width,initial-scale=1">
Also I set a min-width=100% to the header div, but it seems to be useless in a certain page on iPad, please see this image:
Anyone has some ideas about those problems?
I'd like to be able to format my blog in a way that is usable for both desktop and mobile without attempting to detect mobile browsers. As a fan of web standards, I would think that if I used just basic HTML with no styling at all, it should be usable, but it turns out both iPhone and Android browsers render with tiny text (apparently to duplicate the layout that would be seen on desktop browsers).
I am aware I can use media queries and a dozen other techniques to get the appearance I want on mobile browsers. I'm interested in knowing if there is any way to get a mobile browser to display something at the devices default font size without resorting to font-size: 20pt; in a stylesheet. Is there any kind of "yes, this is just plain HTML, so don't try to pretend you have a desktop browser's width"?
The viewport meta does wonders for mobile devices. This will make the viewport the size of the device rather than trying to make it bigger and scaling it down:
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
You may see other versions of this with width=device-width and such. That will work, but it will also scale up your web page when it is in landscape mode (which I find undesirable). Using all these scale constraints will make sure that the viewport is the appropriate size for both orientations.
Apple, who created the viewport meta, has documentation on it.