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.
Related
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.
The website I've been working on has this odd, and seemingly non-consistent issue, and it only appears to happen on Google Chrome.
My main content section will, occasionally, product vertical and horizontal scroll bars.
When I open the page as a file, the scroll bars pop up intermittently upon opening the page, and refreshing the page. They usually do not show up, but every couple of refreshes or so, they will pop up.
When I run the page locally using NGiNX, the scroll bars will pop up upon opening the page, but disappear when I refresh and no amount of refreshing will bring them back. If I click back and forth between two different test pages I have set up, the scroll bars stick around. Only upon hitting reload, do they disappear.
I have not seen the issue when I run it from my temp free webhosting site, Zymic. I was actually not even going to worry about it because it didn't show up when it was live, but when I noticed the issue popping up from my locally ran web server, I figured I should look into this.
I have no idea where to start looking for what may be causing the problem, but I'm providing a video that will clearly show the issue, and a link to my current live site. Based on reports of others and my own experiences, the issue will not show up from the live site, but it will give access to all of my current code (current-ish, I'm in the midst of trying some things out) and I will happily provide any specifically requested pieces of code. I would try and supply the bits right away that might be causing the problem, except that I have no idea :\ But if I narrow anything down, I will include that bit of the code along with what I've discovered.
Short 58 second video of the problem: http://youtu.be/K7tjGJ8hIV0
Live site (issue should not occur from this link): http://jrltest.zxq.net/
Thank you all very much!
This is caused by your overflow:auto; style on your #maincontent div. Just change the style to overflow:hidden; to make the scrollbars disappear permanently.
Automatic overflow will work by doing nothing with the overflowing content if it fits in the container, but if it overflows by even a bit, it inserts scrollbars to allow the user to scroll. In your case, Chrome will probably recognise a single pixel of overflow, so insert scrollbars. This probably has to do with caching and image-loading. What I think is that if the image is already in the cache, Chrome knows exactly how big it is, and it knows the image will fit in the container, but when it's not cached yet, it reserves some space for the image to load in, and since that space is apparently slightly larger than the actual image, it will take up some extra space.
Check if body value for you is set to overflow:hidden;
If it is, than change it ;)
The same Issue occurred to me while coding in Next.js
just set overflow: hidden; for the Html tag in the global.css file.
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.
EDIT: I've uploaded a video to youtube demonstrating the bug here: http://www.youtube.com/watch?v=zkDYlgtX5Hk
I've got a really weird bug that I found testing my new web application on a Samsung Galaxy S2 running Android 4.03 ICS.
What happens is that when you load a form in the default web browser and then scroll down the page, the hitbox/touchable area seems to stay where it was on screen when the page first loaded, even though the form element itself has scrolled up the screen.
As far as I can tell with the few testing devices I have available, I think this only happens on the Samsung Galaxy S2 as I have tried it in the Android simulator with the same version of android and was unable to replicate the problem. I know this makes it a very specific user base that haves the problem however last I checked the Galaxy s2 was the most popular Android handset in my country (Australia) so it would be nice to find a fix.
I have created a very simple page to demonstrate this at http://users.tpg.com.au/geoffica/test.html
You can replicate the problem by doing the following:
Load the page on a Galaxy S2
Scroll the browser so that page completely fills the screen and the address bar is just off the top of the screen.
Where the select box is, place your finger to the side of the screen as a marker of where the select list was.
Scroll down the page any distance, (while still keeping the select list on screen) then touch the whitespace where the select list used to be and the options should come up on the screen. It may take a few attempts to get it but it will happen.
Now I know you are thinking this is quite tricky to replicate and likely rare that it will happen, but on a form I built for a client because of where the elements were positioned, the hitbox always overlapped the submit button of the form, making it very difficult to hit the submit button. Select lists will also steal touches from other select lists if the hitboxes overlap, making the wrong options appear when touched.
I've tried many things but the only workaround I've found so far is to use the touchstart event to trigger my submit button instead of the click event. This seems to happen before the click event of the select lists and prevents it from getting in first, but this is far from ideal and doesn't stop the select lists from stealing clicks from other elements on the page.
I've also thought about rolling my own jquery plugin to maybe place the select lists offscreen and then trigger their click events by touching a link or something. If it's a mobile device then the options will come up on screen regardless of the position of the select list. This would be quite cumbersome however and I would need to factor in the effect this would have on users coming from a pc or iPad for example which shows the options in a dropdown list instead. It sounds pretty problematic to me. May even require some Galaxy s2 specific browser/device sniffing.
Does anyone have a real workaround for this, apart from just not using select lists?
Are you by any chance using absolute positioning for it? this will fix to a certain area on the screen not the page.
First, I would update the document header to a proper HTML5 header:
<!DOCTYPE html>
I think this might be a problem you can fix With Jquery-mobile
Just simple because when you do not use it , you website look very weird on mobile Browsers
May be this is the solution and this is just a hint :)
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.