Develop Reference

Deadzone in iPhone 6 Plus, Safari, iOS8. Bottom area loses interactivity when tabs are visible

I'm making a webapp and want to use all the screen and avoid scrolling if possible. There will be buttons that need to be clicked in many areas of the page.
The area at the bottom of mobile safari is not clickable when the tab bar is open and I rotate to portrait and back to landscape.
I have set the body height to the same as window.innerHeight instead of 100% so that I don't have to scroll to get to buttons at the bottom.
bodyEl.style.height = window.innerHeight + 'px';
It may be the case that this area is not usable for interactive content.
Here is a demo with code:
http://plnkr.co/edit/327sUQ?p=preview
You should be able to open a preview of it on iPhone 6 Plus by clicking on the fullscreen button 'Launch the preview in a separate window'.
Update:
It definitely looks like it was a bug in iOS8, it's working as expected in iOS8.4, 9.0 & 10.2 from my simulator.

I may have found an answer to your issue, but would love to hear if you can confirm. Setting the content of your page to have the following styles:
overflow-y: scroll (allows you to scroll below the viewport, but only if necessary per the length of the content; the default value is visible)
-webkit-overflow-scrolling: touch (to smooth any scroll behavior)
in addition to your height: 100% (which forces the content to fill the viewport)
appears to force the iOS menu (tabs and address bar on top as well as nav bar on the bottom) in Safari to always appear. That way, button clicks to the top and bottom of the page are no longer "dead zones" and will actually work instead of opening up the Safari menu.

I'm searching for a solution for a similar problem - this is not an answer, but an attempt of explanation.
First of all - currently, I cannot confirm this behavior - seems like it's fixed in iOS 8.4 (12H143). Didn't know exaclty in which version I saw it the last time.
Nethertheless, I try to explain what I've found out (until we decided to not bother anymore).
The not clickable area is not always a dead zone. If you scroll up before you click, chances are high you get it working. Thus I think the (empty) standard navigation bar is there (height and behavior of the elements are similar/the same), even if it's empty (all element moved to the address bar) in landscape mode.
Btw.:
There's another (similar) problem with the iPhone 6 plus (not fixed yet).
If you have a position: fixed element on the top of a webpage, in landscape mode and only if there are two or more tabs open (and the tab bar is visible), you can click through this element (even through buttons) - as if the whole thing isn't there.

I know this question is a bit old, but since the issue still exists I thought I should share my experience...
As of now there is NO fix for the issue, but there is a workaround. The solution jennz0r provided may work for some, but I didn't like the idea of the menu bar always showing. I saw a website that had the issue solved... well it seemed to work at least. I didn't find anything in their css or js.
So what was the fix? Since the "dead zone" is 44px in height they simply made their floating bar 88px height :D Users would instinctively tap on the top/center of the button and it will almost always work at first try!
Another workaround would be to simply make the button/bar float 44px from the bottom.
"If it's stupid, but it works... it ain't stupid..." ;)

Why would the zoom button not show up in photoswipe?

I am trying to implement photoswipe in a new website, but for the life of me, I can't figure out why the zoom button won't show up. I tried in chrome and IE. I can pinch to zoom in mobile, but that may just be the built in zoom capability of the mobile device.
Everything else seems to be working like a charm.

Have you tried using a test picture with a high resolution on your computer (over 1500x1500x)? When my picture is already at 100% width and height no zoom button is shown. When it's under 100% a zoom button is shown.

Detect if the viewport width is bigger than the visible width on Mobile Safari using javascript

I have an element with position fixed (pinned to any corner) on a page (which I do not necessarily have control over the meta viewport tag - it is an embedded widget for third party sites). On Mobile Safari when the user pinch zooms the page at a certain point the viewport becomes larger than the visible area. At that point the fixed position element stays attached to the viewport and is not necessarily in the visible area.
I would like to compare two widths: the width of the visible area and the width of the viewport. I believe the size of the visible area is window.innerWidth. I am not sure how to measure the viewport.
I have been trying to see the relationships between:
document.documentElement.clientWidth
screen.width
window.innerWidth
window.outerWidth
...But have not been able to see anything obvious.

This is butt ugly but it does show some code that almost works (view on iOS to see it working. Use a desktop and click edit at top right of page to see or edit code):
https://jsbin.com/jopamu (iOS only)
The trick with the "overzoom" calculation is nasty but it does compensate somewhat for the multiple viewport zooms. It is a complex problem to solve because there are competing issues:
pinch-zoom
zoom due to input focus
the "position:fixed" zoom
potentially the OS (accessibility) zoom
The possible solutions I have found are:
Position the menu using the calculations above and position:absolute - updating the left/top in onscroll event. Has ugly juddering (can improve a little by hiding and only showing when zooming/scrolling finishes).
Position the menu using position:fixed but change the left/top to correct the menu position as zooming/scrolling occurs. Much less judder but I couldn't quite get it 100% reliable (some race condition).
Not suitable for your case (and highly unrecommended due to risk of breaking things): you can prevent pinch zooming and iOS10 double-click zooming by cancelling default on touchstart. Difficult because it needs many other workarounds so normal touch works, and needs synthetic scrolling and zooming (but has ugly side effects such as preventing scrolling working sometimes and also interferes with accessability e.g. if voice accessability turned on etc etc).
If you just want to see the widths then use the older version:https://output.jsbin.com/jopamu/6

Mobile Fixed topbar on zoom in/out

I'm trying to implement a fixed topbar for mobile devices in HTML5 that also stay fixed when the users zoom in/out the webpage.
As far as I saw on Jquery mobile they disable the zoom in/out in order to achieve a fixed topbar.
Google made its own content scrolling implementation to make the fixed topbar for the gmail application. But they also disallow the zoom.
Does anyone know a workaround over this? Do know If I can relocate the bar at the top of the new area with js when they zoom in/out?
Update: I found this post where there's an example of a fixed top bar that doesn't disable the zoom but when you zoom in/out it doesn't stay at the top.
Also I was seeing the docs for Safari on IOs but I can't find a way to get the relative position of the new zoomed area so I can relocate the bar at the top of it on every zoom in/out event.

Apple has implemented a special META tag to handle zooming:
<meta content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
This disables zooming on the iPhone, and it should work on Android as well.
As for your desired zooming effect, my advice would be to disable zooming completely and do 100% of this using jQuery and CSS webkit transitions and animations.
#some-div {
-webkit-transition: all 0.5s ease-out;
}
Here are some other jQuery libraries that do zooming:
http://flwtb.co/VKTQ1C
http://flwtb.co/VKTTdW
Hopefully this helps!

I solved the conflict between fixed position and zoom by adding
"data-disable-page-zoom="false""
to the fixed tag.
Hope this can help.

Make default zoom css

So my problem is fairly simple.
When I started to develop my website my default zoom level on my Firefox browser turned out to be, well, less than 100%. (Maybe 70%)
Which means that what I have designed so far is actually in zoomed out mode, which in turn means that my users or web visitors will see something that looks very zoomed in when they look at it with 100% mode.
This can easily be solved by holding Ctrl and scrolling you mouse wheel twice. Obviously though I can't encourage people to do that.
So,
Is there some function or property in either HTML, CSS or Javascript than can set the default zoom level to zoomed out?

I would highly recommend to create your website again !!!
Does it help ?
body { zoom: 3; -moz-transform: scale(3); -moz-transform-origin: 0 0}
Reference

Chrome can display initial zoom levels such as
HTML {
zoom:90%;
}
which would by itself zoom the entire page not the initial browser zoom level, this works like scaling, but it's not compatible with either firefox or safari or my guess. The rest of explorers.
GL

Nop, you can't. That's a browser feature.