mobile-safari

问题 The glyphs in my iconfont, a custom web font in the navigation in my footer, are not showing when viewed on an iPhone. It is iOS 6.1.4 Any idea why this is happening and how to fix it? Here is a screenshot of the icons in the footer not appearing: Here is a link to the page where this is happening 回答1: The problem is that IOS provides partial support for font-feature-settings CSS property but you can use ligatures in iOS Safari adding text-rendering: optimizeLegibility . The following link

问题 I can't get FileReader to work in iOS 8. The following demo illustrates this (jsFiddle link for iOS - http://jsfiddle.net/gys6rubg/1/): var file = document.getElementById('file-input'); file.addEventListener('change', function(event) { var file = this.files[0]; if(!file) { alert('No file'); return; } var reader = new FileReader(); var timeout = setTimeout(function() { alert('FileReader not functioning'); }, 500); reader.onload = function(event) { clearTimeout(timeout); alert('Base64 length -

问题 I created an application that uses the data: uri mechanism to open a file in the calendar on iOS. It works fine if you run it from mobile Safari, it works if you add a shortcut to your home screen, but as soon as I add: <meta name="apple-mobile-web-app-capable" content="yes"/> … to make it behave a little bit more app-alike, it no longer works. (I also have to say that it never works in Chrome for iOS.) Is this a known issue? Are there any workarounds? Hidden options I'm not aware of? 来源：

问题 I am wondering how it is possible to detect if a user uses the "fullscreen feature" in Safari. I don't mean if it's started from the springboard, I mean the feature that was added in iOS 6. Actually, there was a similar question here on SO where this code was posted: $(window).on('resize', function(){ if ($(this).height() > 300 && (window.orientation == 90 || window.orientation == -90)) { // Full screen! } else { // Exit full screen! } }); But the problem with it is that it is also triggered

问题 I have a problem I have not been able to Google my way out of and this is my first post on stackoverlow. I have two canvas elements stacked on top of each other, to create a lottery type scratcher feature on my companies website. The problem is that on the Ipad if I scroll down the page even a pixel the touch positions are off equal to the height of the scroll. I have tried several different routes to try to fix this offset problem to no avail. JS libraries used: Jquery1.6.4 and kinetic2d1.0

问题 I have written an efficient parallax script that is very smooth on mobile. However, it is only smooth if I am scrolling with my finger on the screen. When scrolling with my finger on the screen, the parallax is smooth. But the second I take my finger off and let the inertia take over, it starts lagging. But only when the inertia takes over. I'm thinking if there is some kind of scroll event that is fired often during inertial scroll. It does not appear to be the script causing the lag, it is

问题 Is support of HTML, CSS and Javascript same in Desktop Safari ( Mac & Windows ) and Mobile Safari (iPhone)? If I'm making some thing for iPhone Safari and use Desktop version Safari on my Windows 7 PC to test and debugging, after fininsh will it look same on both? Are there any difference between Safari ( Desktop ) and Safari (iphone) in terms of support of HTML, CSS and Javascript? 回答1: They are based on the same html render engine - WebKit. Pure HTML, CSS and Javascript are supported in

问题 I'm trying to troubleshoot a page that was created by someone else, and have never used flexbox before. It is a 3-column layout that stacks perfectly in when resized in Firefox or Chrome but when viewing in Safari on desktop or iPhone the elements don't stack. The first one seems to get hidden under the second, and the third remains to the right, outside of the content area. I found a similar topic and added the viewport code in the head but it still doesn't work. I've tried several different

问题 Working on an iOS web app. The user can scroll the content of the page up and down. However, is there a way to stop the screen from being dragged so far that the grey background becomes visible? This is replicable by opening any webpage in mobile safari and pulling the page down. 回答1: You can use a javascript library like pastrykit, or iScroll, to handle the scrolling instead of the default, similarly to how the mobile gmail webpage works, or the iPhone User Guide. 来源： https://stackoverflow

问题 I am developing a Facebook App using JS SDK. Everything works fine on FF/Chrome/Safari, except on iPad where the SDK just won't load. I tried it by using very simple code (most of it coming directly from Facebook's documentation), like that: <!doctype html> <html> <head> </head> <body> <div id="fb-root"></div> <script src="//connect.facebook.net/en_US/all.js"></script> <script> /* All Facebook functions should be included in this function, or at least initiated from here */ window.fbAsyncInit