mobile-safari

programmatically changing webkit-transformation values in animation rules

你说的曾经没有我的故事 提交于 2019-12-17 05:45:06
问题 I have this stylesheet: @-webkit-keyframes run { 0% { -webkit-transform: translate3d(0px, 0px, 0px); } 100% { -webkit-transform: translate3d(0px, 1620px, 0px); } } Now, I would like to modify the value of 1620px depending on some parameters. Like this: @-webkit-keyframes run { 0% { -webkit-transform: translate3d(0px, 0px, 0px); } 100% { -webkit-transform: translate3d(0px, height*i, 0px); } } I would prefer to be able to use JavaScript and jQuery, though a pure CSS solution would be ok. This

Multiple “apple-touch-startup-image” resolutions for iOS web app (esp. for iPad)?

核能气质少年 提交于 2019-12-17 05:33:28
问题 I've written an HTML5-based iOS web application and all seems to be working well, but I'm trying to polish it up with multiple startup screens. The iPhone/iPod touch works well w/a PNG of 320x460, as follows: <link rel="apple-touch-startup-image" href="img/startup_screen-320x460.png" /> I found plenty of documentation that says the startup images for the iPad should, like the iPhone/iPod touch, have the 20px shaved from the height to accommodate for the status bar giving resolutions of

CSS background-size: cover replacement for Mobile Safari

旧巷老猫 提交于 2019-12-17 02:58:35
问题 Hi I have several divs on my page which have background images that I want to expand to cover the entire div which in turn can expand to fill the width of the viewport. Obviously background-size: cover behaves unexpectedly on iOS devices. I've seen some examples of how to fix it, but I can't make them work in my situation. Ideally I'd prefer not to add extra <img> tags to the HTML but if it's the only way then I will. Here is my code: .section { margin: 0 auto; position: relative; padding: 0

Force link to open in mobile safari from a web app with javascript

房东的猫 提交于 2019-12-17 02:37:46
问题 When calling window.open() in a iOS web app, the page opens in the web app instead of mobile safari. How can I force the webpage to open in mobile safari? Note: Using straight <a href> links is not an option. 回答1: This is possible. Tested with iOS5 stand-alone web app: HTML: <div id="foz" data-href="http://www.google.fi">Google</div> JavaScript: document.getElementById("foz").addEventListener("click", function(evt) { var a = document.createElement('a'); a.setAttribute("href", this

Copy to clipboard using Javascript in iOS

爱⌒轻易说出口 提交于 2019-12-17 02:33:48
问题 I'm using this function to copy a URL to the clipboard: function CopyUrl($this){ var querySelector = $this.next().attr("id"); var emailLink = document.querySelector("#"+querySelector); var range = document.createRange(); range.selectNode(emailLink); window.getSelection().addRange(range); try { // Now that we've selected the anchor text, execute the copy command var successful = document.execCommand('copy', false, null); var msg = successful ? 'successful' : 'unsuccessful'; if(true){ $this

Disable Auto Zoom in Input “Text” tag - Safari on iPhone

一世执手 提交于 2019-12-17 02:03:10
问题 I made an HTML page that has an <input> tag with type="text" . When I click on it using Safari on iPhone, the page becomes larger (auto zoom). Does anybody know how to disable this? 回答1: The browser will zoom if the font-size is less than 16px and the default font-size for form elements is 11px (at least in Chrome and Safari). Additionally, the select element needs to have the focus pseudo-class attached. input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime

iPad Safari scrolling causes HTML elements to disappear and reappear with a delay

别来无恙 提交于 2019-12-17 01:32:12
问题 I'm currently developing a web app using html5 and jQuery for iPad Safari. I'm running into a problem wherein large scroll areas cause the elements that are offscreen to appear after a delay when I scroll down to them. What I mean by that is, if I have a row of images (or even a div with a gradient) that is offscreen, when I scroll down (or up) to it, the expected behavior is for the element to appear on screen as I am scrolling to it. However, what I'm seeing is that the element does not

How to disable phone number linking in Mobile Safari?

萝らか妹 提交于 2019-12-16 20:05:33
问题 Safari on iPhone automatically creates links for strings of digits that appear to the telephone numbers. I am writing a web page containing an IP address, and Safari is turning that into a phone number link. Is it possible to disable this behavior for a whole page or an element on a page? 回答1: This seems to be the right thing to do, according to the Safari HTML Reference: <meta name="format-detection" content="telephone=no"> If you disable this but still want telephone links, you can still

animation speed not changing in safari/chrome iphone

血红的双手。 提交于 2019-12-14 04:02:36
问题 I am using a keyframe animation to rotate the circle. It is working fine in android browsers, chrome and, Mozilla. But animation speed on click of a button is not changing in safari/chrome of iphone. class App extends React.Component{ state = { speedClass : "two" }; render(){ return( <div> <div className={"spinMe " + this.state.speedClass}>I am spinning</div> <button onClick={this.handleClick}>Change speed</button> </div> ); } handleClick=()=>{ this.setState({ speedClass: this.state

How can I understand if UIApplication is going to open link in Safari app?

点点圈 提交于 2019-12-14 03:59:03
问题 I'm developing a browser. I need to open new browser windows in the same WKWebView instance, but also I need to be able opening links in Appstore application. - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler { if (navigationAction.targetFrame == nil) { NSURL *url = navigationAction.request.URL; UIApplication *app = [UIApplication sharedApplication]; if ([app