I'm wondering if anyone knows a way that you can prevent browser zooming of specific page elements.
This is for the mobile version of a site I'm developing. I have a fixed menu bar that runs full width of the site and remains at the top of the page at all times to provide navigation. I've optimised the button/text sizes to work for touch screens and don't really want it to be affected if a user zooms the page content text.
The only thing I've come across is the following CSS, but this doesn't seem to work when I've tried it:
-webkit-text-size-adjust: none;
I'm do not wish to disable resizing of the whole page via the Viewport meta tag, I just want to target the menu bar html elements.
The zoom mechanism varies across browsers and is not standardized, nor is it scriptable. Any solution would be pretty convoluted in order to work across browsers. There is no easy way to do this.
I wrote a modal dialog based on a similar question, you can find it here.
In essence, the logic is about getting the page scale ratio based on window.innerWidth and maximum page width, applying it as a CSS transform to the element and then repositioning it on screen. If there is interest, I will rewrite it into a library that just takes a position: fixed element as an input and does all this magic to it when the user zooms the page.
Related
I have discovered chart.JS for a while and I wanted to implement it in my website. I wrote the simplest code available on their webpage and the tooltips do appear indeed, but when I use the zoom property on the html tag in my CSS (cause I want to make the whole page smaller) , the tooltips seem to go crazy. Some of them do not appear anymore and others appear only when hovering certain areas of the chart. Is there any fix to this ?
The CSS zoom property is not advised for this use. It is mostly for image zoom, and has very bad support in different browsers. I would advise making content smaller by setting widths of containers, and reducing font sizes.
There is no telling how css zoom will affect the canvas used by ChartJS in different browsers.
ref: https://developer.mozilla.org/en-US/docs/Web/CSS/zoom
So I've been running into this annoying problem and I don't seem to be able to fix it by myself. I'm currently working on an experimental App written Angular (11.2).
The page itself should be divided into several screen filling sections which users scroll through as if it were specific tiles. Therefor, scroll snapping is a must.
However I'm simply not capable of hiding the mobile browser address bar. This is due to the fact that, in order to get the snapping effect, the page only consists of one single element that is scaled fitting the current viewport. Also manually hiding the browser address bar using the widely used window.scrollTo(0,1) hack does not work since there is no real scrolling to be achieved.
Thus my question
Can I somehow hide the browsers address bar while still being able to keep the required layout required for scroll snapping?
You could use the app.manifest file to set your web-app to fullscreen. Dont know exactly if just works with installed pwas, bur you could give it a try.
How to make a website get treated like in image when window resizing? I don't know if this could be done with the viewport or not. I have looked at some answers and most of them say that it not possible or not a standard. Yet on this very site you can see when zooming in that elements do not get resized or at least the element to window size ratio is always the same. but when you go to a website like https://www.lynda.com/ you can see the elements resizing when zooming in and there is never a scrollbar for the width unlike stackoverflow. So how can someone site's be like stackoverflow in that regard? because lynda.com way seems to be the default.
Thanks in advance ....
If I got it correctly, you are interested in these concepts:
Fixed layout/design: SO like layout, elements do not react if viewport is changes
Response layout/design: Lynda like layout, elements change or even disappear, if viewport becomes small enough
A nice, short and illustrative presentation can be found here, where you can also find out about other design modes.
I am really new to HTML and CSS but have created a prototype page to get a reasonable size, look, and feel to fit on a 768x1024 or larger display. I revised it to be used in landscape mode but it's apparent it won't fit in a typical browser window even at full screen with my minimum height and width criteria. The page doesn't contain text; just buttons, check boxes, text, and textarea "widgets". I think that I can fiddle with sizing and make it fit into a window if there is only a top "title" bar with the minimize and close buttons but absent all the other "stuff" such as the navigation bar, tool bar, etc. found in a typical browser.
I do use a couple of web apps that are like this so I know that it is possible. I've searched Google for examples and found popups but none are like this.
My question is: how do I do this, preferably without javascript, and what is this type of window called?
This should help with the minimizing: Is there a good jQuery plugin for a hide effect that looks like minimizing windows in Windows
You're going to have to include jQuery from http://www.jquery.com and call this animate script when the window you want to minimize is clicked.
This will help you with the 'closing'.
https://api.jquery.com/hide/
When you click on an element you can call .hide() on it, effectively closing it from the user's perspective.
I have a navigation bar on the mobile version of a website and want it to be always as wide as the screen, i.e. when the user zooms in, the bar is supposed to not zoom in with the rest of the page.
Illustration of the problem:
Without zoom
With zoom
I know this is possible with JavaScript as described in this approach: https://stackoverflow.com/a/14466070/695457
But is there a way without JS? If not, are there any other libraries for this except detect-zoom?
There is no way without JavaScript. I suggest you leave it as it to be honest as those menu items look mighty small on the first screenshot if it was on a phone. You may be introducing an accessibility issue by disabling the functionality to let people with poorer eyesight view the menu text.