HTML disable zoom on page apart from the images - javascript

I'm creating a simple PWA, and I'm trying to make it looks like a native mobile application though I'm having several problems with the pinch-in.
I've added this code to my layout.html (I'm using Flask for the backend)
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Although it really works as I want, there are some images that I want the user to be able to zoom in, and I know is not recommended to disable the scalable zoom for mobile but really, this is what I want, no zoom on the entire page apart from the imgs tag I have.
I'd like to have a pure css/js solution or at most something that does not need npm even a cdn is good for me

Set height and/or width of elements that ARE NOT images to vh or vw.
https://www.w3schools.com/cssref/css_units.asp
vh - viewport height - represents fraction of screen height. When you zoom in - (for example) font stays the same size
div {
font-size: 2vh;
}

Related

I want to load the page in mobile as in desktop, but it has too much zoom

So i got a client that wants the site to look on mobile exactly like on desktop (small text and all). the issue im encountering is that the site zooms on mobile so i figured im doing something wrong.
i used this code:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=0.5, minimum-scale=0.1, maximum-scale=1.0">
with this it loads it zoomed, if i change the initial scale to 0.1 i get white bars around the content and the text gets enlarged.
any idea how to achieve it properly? JS or something?
thank you.
You have to use media query to make your site mobile-responsive and you only need to add this code in your <meta> tags.
<meta name="viewport" content="with=device-width, initial-scale=1.0">
You can use media query like this. In here 500px is based on mobile device width, It means all css properties in media query will run if your device width is below 500px. Otherwise it will load default css properties which you wrote earlier in the document.
#media all and (max-width: 500px) {
/*Your
Changing
CSS
Properties*/
}
You can learn more about media query in this article.

How to detect mobile notch?

I have a web app like my image 1 below, everything looks good. The problem is that when the app is launched on a mobile that has a notch, it creates a layout problem, as you can see in image 2. And I can not use a "safe area" because some of my pages need to be stuck on top, like the image 3.
I can easily solve this by adding media queries to add a padding above the content on iPhone X, but the problem is that not only iPhone X have a notch.
Ideally there should be a JS method to detect mobiles with a notch (and return the height of this notch would be even better) But is this possible? If not, what is the better way to deal with this problem? Do I have to create media queries for every smartphone in the world ?
HTML::
meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"
CSS::
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);

What is the browser auto-zoom based on and how can I offset using CSS or Javascript?

I've built a web page which displays a grid. On the regular screen (laptop / desktop), the browser is at 100% zoom level and the UI looks fine.
However, when I connect my laptop to a projector, the browser automatically sets the zoom % to 125% and everything is bigger and scroll bars appear everywhere.
I don't understand what this behavior is based off or where it is coming from. Is it due to the resolution change?
Is there a way for me to make sure my UI does not get zoomed when I connect to a large screen?
Thanks
You should be able to avoid scaling on certain screens by setting the viewport meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Mobile devices - Override viewport scale settings to implement a zoom/pan media viewer?

I have a responsive layout with a fixed header. When scaling (zooming) is enabled via the viewport meta tag, the layout can break when the user zooms because the header also zooms - which is BAD. (I wish I could keep just the header in place without scaling no matter what the current scale setting is). Anyway, that's why I'm use the following meta tag that disables scaling:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
My goal is to implement some sort of media viewer like Facebook that overrides the viewport settings of the document. Upon closing, it should restore everything back to normal. I tried opening an iframe that loads a document that can scale, but it seems like the parent document overrides the iframe.
FYI, I'm using jquery.
Just discovered that with jQuery you can do this:
var meta = $('meta[name=viewport]');
$(meta).attr('content', 'device-width, initial-scale=1, maximum-scale=5');
I could get more fancy... like getting the original setting first and then restoring it when you're done. I tested this on iOS 6 and it works. I have not tested it on other devices.

Best way of dynamically scaling a page?

I was wondering what you guys and gals would recommend as the most efficient want to dynamically rescale a website based on resolution?
Is there anything that rescales elements AND images?
Or do I need to do those separately?
I've been trying to use percentages and em's, but it seems like a huge hassle. Are there any scripts?
I've been searching for quite a while and haven't found anything that quite fits yet.
New Media Queries are landed in CSS3 specification. You can read an awesome article on the subject from A List Apart Magazine (with example, try resizing your browser window)
There are also existing scripts of course.
The best way to detect the orientation of the device is by using meta tags. The viewport meta tag is used by Safari/chrome on the iPhone and iPad to determine how to display a web page. Following are the properties of the viewport
The viewport width to the width of the device by adding the following declaration to the head of your HTML file
<meta name="viewport" content="width=device-width">
To set the initial scale to 1.0, add this to the head of 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 the head of your HTML file:
Utilize the viewport meta tag to improve the presentation of your mobile browser. This meta tag sets the width and initial scale of the viewport. Add the appropriate viewport meta data to the head of the document to instruct the browser to present your content in as large a context as possible on the device’s screen. If you don’t set the viewport width, the page will be zoomed way out when it first loads.
Full Screen Mode
<meta name="apple-mobile-web-app-capable" content="yes">
If content is set to yes the web application runs in full-screen mode; otherwise, it does not. You can determine whether a webpage is displayed in full-screen mode using the window.navigator.standalone read-only Boolean JavaScript property.

Categories