I'm developing a website for smartphone and I'm having some issues with the top safari bar. I would like to always display it in portrait and landscape.
On a page, I do have a link animation. When I'm clicking on it, the browser is removing the top bar. Is there a way to let the top bar during the animation?
Thanks
Safari automatically slides the browser top bar up on iPhones and iPod touches asoon as the page is scrolled, even by a single pixel.
The only way to get around this would to have a div that fills the screen with css property overflow:hidden but you would have to control movement of the content.
Related
Naturally, when you open a website in iPhone Mobile Safari in portrait and rotate it to landscape, it is going to turn "full-screen" (hide bottom-top browser bar). Then you rotate it back to portrait, it keeps the full-screen view (the bottom-top browser bar still not visible). To test, simple open Wikipedia in your iPhone (or on an iPhone Simulator) in portrait, turn it to landscape (going to be fullscreen right away), and turn it back to portrait (keeps its fullscreen view).
I need to change this behavior. I want to make sure, in portrait, the top-bottom status bars are always visible, but in landscape, my website is full-screen. (Because my HTML game is not scrollable, only this back and forth rotation is the issue.)
This game works on this way:
https://lobby.sgplayfun.com/touch/spadenew/20190115P/games/triplepanda/index.jsp?game=S-TP02&language=en_US
Open this game in portrait Safari on an iPhone (or on an iPhone Simulator), turn it to landscape (going to be full-screen) then turn it back to portrait, and the top browser bar is going to appear ???
How can I achieve the same, how does this Panda game do this?
Things I tried
Copy the < meta viewport > tag from Panda, did not work.
look for what does the "ioshack" and "iPhoneX" HTML class do - not helped
google all around, even check Chinese forums and pixiJS forums (that Panda game is a pixiJS app), did not found any useful.
After more investigation, I found the following truth at least on iOS 9-12:
Safari does not keep the full-screen view in portrait mode if the body is not scrollable, meaning the content fits the default view where the top and bottom bar is visible (they will automatically appear in this case when you rotates your phone)
Safari does keep the full-screen view in portrait mode if you use height:100vh on your or tag (instead of e.g 100%)
So, changing the body style to "height: 100%" AND making sure there is no div longer than the body was enough to force Safari avoiding full-screen mode in portrait.
I'm building a full screen slider. The last slide is supposed to have a horizontal scrolling area. I'm using css translations (for a smoother animation) to bring the div inside of the viewport.
For some reason, the scrollbar won't work unless you resize the window.
My guess is that when the scrollable div is created outside of the viewport, it is not rendered by Chrome (for performance reasons?).
Then I guess when you resize, the whole thing gets calculated and redrawn and then it is taken into account.
Here is a JSFiddle that illustrates my problem.
http://fiddle.jshell.net/f3thbjqc/6/show/
Here's a video that illustrates my problem (when I wiggle the mouse is when I try to scroll right, unsuccessfully. Then I resize, and it starts working).
My setup: Mac os High Sierra. Both Chrome 69.0.3497.100, and Safari 11.0.1 (13604.3.5) behave the same, firefox doesn't have the bug somehow
Had a similar problem with the materiallize framework when i was usings tabs and a slider inside. The problem was the slider was not working and after I resized the window it was working perfectly.
Try to fire this event manually when the slider is in view
window.dispatchEvent(new Event('resize'));
When viewing a web page on my mobile phone (Android default browser), there is an address bar at the top and a navigation bar at the bottom. These bars dissapear if I start to scroll down a but appear the moment I scroll back up to the top. Other browsers have similar operations and each bar has their own sizing and behavior.
I need to be able to get the height of the view-able part of my website (ie, the part between the 2 bars). When the bars retract or hide, I need to be able to detect the new height.
How can this be done?
if you are using jQuery you can get height of viewable part using
$(window).height()
and if you are using javascript you can get height by following code
window.innerHeight
I have tested this code with device Moto X.
I'm working on a site optimized for iOS7. i found out that, On orientation change to landscape on safari mobile the site goes to full screen but the browser blocks some pixels of height and width top and bottom of the view. Any touch or tap events in the area will not do what we expect it to do but it just comes out of the full screen view and triggers browser options.
1.This is a screenshot of fullscreen view and when i click on "what is twitter?" and fullscreen turn off and options view is shown(second image)
2.This is the second image where we can see upon clicking "what is twitter" we get this view
Is there any possible way we could over ride that tap?
I think I may have found an answer, but can't confirm when switching between Portrait and Landscape. Setting your content to have the following styles:
height: 100% (allows content to fill the viewport and go beyond the bottom)
overflow-y: scroll (allows you to scroll below the viewport; the default value is visible)
-webkit-overflow-scrolling: touch (to smooth any scroll behavior)
appears to force the iOS menu in Safari to always appear. That way, button clicks will actually work instead of opening up the Safari menu. Hope this helps!
If I understand your question right, your link is on the bottom of your page.
You have to add some space to the bottom of the page (the height of the safari icon bar).
Though this helps only if the user scrolls all the way down to the bottom.
The non-clickable Area is relative to the browser viewport, not to the page height. So when a button (or something else) is inside that area where the toolbar appears, you can't click it on first try.
On iPad I cannot scroll a web page. It works fine in Safari, Chrome and Firefox on OS X.
The page has an area in which content can be scrolled only horizontally. It consists of a container div which has width = 100% and height = (100% - 40px). I am setting the height by a JavaScipt function which is triggered by window resize events. Inside this container is another div with the width of the content (very wide, to avoid line breaks). Inside that is the content.
CSS properties of the container are:
overflow-x:scroll;
overflow-y:hidden;
white-space:nowrap;
See the page and full source code here: dcfoto.de
On iPad, scrolling is not possible. What am I doing wrong?
By the way: resizing also does not work properly on orientation change. Maybe that's connected.
Unfortunately a two-finger swipe needs to be performed, and even then it is not responsive (when compared to the default one finger swipe scroll).
There are quite many javascript solutions out there, (sencha touch and iscroll being the most promising and advanced)
I would recommend http://cubiq.org/iscroll-4 which is hands down the coolest touch-scroll script out there. It also works for android, but quite more sluggishly since the default android browser albeit webkit based doesnot support css3 3d accelerated properties as good as the mobile safari one.
If I were you I would check for the user agent of the user, and deploy that script for android and ipad/iphone users.