mobile-safari

问题 I have a small mobile phone app that is acting strangely on the iPhone/Mobile Safari. The page renders and works great when it's orientation is vertical. When I rotate the phone horizontally some, but not all elements on the page resize correctly. Some header elements will stay nearly their same size, maybe increasing by 10%, others will double in size. Has anyone run into this? My first thought was that the css could have a mix of sizes based on ems and px's but finding every size element

问题 I'm having strange issues with text on a canvas when using an iPhone or iPad. Either the text gets drawn properly (rarely), or it gets drawn upside down, or it doens't get drawn at all. When the text does manage to get drawn, it is wiped when the iPhone/Pad is rotated. I have the following code. It seems that I can only get the text to stay on the page at all if I use a setTimeout. It seems to be drawn over if I call fillText as soon as the document is loaded. Anyone else experiencing this

问题 After we upgraded my iPhone to IOS11, I started seeing a cursor in a random position in my login window. This also happens on Chrome / IOS11. The position of the cursor is marked red on screenshots below. 回答1: Try adding position: fixed to the body of the page. 回答2: Piggybacking off of ybentz's answer. If you use the bootstrap modal, you can add this to your main.js file: var savedScrollPosition; $(document).on('show.bs.modal', '.modal', function() { savedScrollPosition = $(window).scrollTop(

问题 How can I utilize the new MobileSafari device motion APIs to capture a "shake" event? 回答1: See this awesome blog post: http://www.jeffreyharrell.com/blog/2010/11/creating-a-shake-event-in-mobile-safari/ Which illustrates this example: if (typeof window.DeviceMotionEvent != 'undefined') { // Shake sensitivity (a lower number is more) var sensitivity = 20; // Position variables var x1 = 0, y1 = 0, z1 = 0, x2 = 0, y2 = 0, z2 = 0; // Listen to motion events and update the position window

问题 I need to check if an iOS device visiting my Website has iOS 3.0 or higher installed. Can I do that? 回答1: Bit of an older question, but I believe none of the answers currently given answer the question appropriately. If you want to do something like if(iOS_version > 3){ // Open something } Then I believe you are looking for if(/(iPhone|iPad|iPod)\sOS\s3/.test(navigator.userAgent)) { // use apple maps } Where s3 is looking for iOS3. Change s3 to s9 to check for iOS9 回答2: If you wish to check

问题 Unfortunately Safari disables Motion and Orientation access by default in: Settings > Safari > Privacy & Security > Motion & Orientation Access So what I'm trying to figure out is if it's possible to detect whether the user has this setting enabled or not. Is there a property on the window object in the browser that informs me that it's enabled? I've tried looking up the solution on StackOverflow and various other places but they're either outdated or just don't work. 回答1: You could use the

问题 I'm developing a web app for iOs device, but I have a problem with the html5 audio tag... I designed a custom audio player, and I control the song with javascript functions. With safari desktop the app works well, but on safari mobile it doesn't recognize the duration of the audio; the value of the duration property is NaN. I have to play, stop and replay the audio for retrieve the correct value. Probably the cause is that the media preload is disabled on safari mobile... Is there a way to

问题 We're experiencing a weird problem with font icons. First couple of visit they load beautifully, but after a period of idle (usually around 24 hours) on subsequent visits they are replaced by squares. In Chrome, Firefox and even IE it works without problems. When the problem is there I can see the CSS with the embedded font in the inspector but the font does not render. The CSS is cached and it feels like the font is evicted from the cache but never loaded again. We have tried different ways

问题 We're experiencing a weird problem with font icons. First couple of visit they load beautifully, but after a period of idle (usually around 24 hours) on subsequent visits they are replaced by squares. In Chrome, Firefox and even IE it works without problems. When the problem is there I can see the CSS with the embedded font in the inspector but the font does not render. The CSS is cached and it feels like the font is evicted from the cache but never loaded again. We have tried different ways

问题 How can you detect which CSS animation just finished in JavaScript? The ultimate need is to re-trigger a CSS animation. Due to our HTML hierarchy, we prefer not checking the element's class but instead taking action only when a particular animation ends. If you have a method that allows re-triggering an animation without removing/adding a class, please let us know. Otherwise... our code: page.find( '.button.letter' ).on( 'webkitAnimationEnd', function() { $( this ).removeClass( 'tap_animation