Tag: mobile safari
在Safari iOS 10中，SVG转换旋转90,180或270度不能在圆上工作
我想通过设置stroke-dasharray和不同的stroke-dashoffset来创build一个使用SVG圆元素的圆环图。 SVG元素需要旋转270（或-90）度，以使图表“栏”从顶部开始。 这里是代码： http://jsfiddle.net/q3wb6gkq/ 使用transform="rotate(270, 80, 80)"的第一个数字指定旋转angular度。 问题是：在iOS 10上的Safari中查看时，此旋转不适用。 实际上，设置90,180或270度旋转不起作用。 相同的angular度，但负面（例如-90）也不适用。 下面是iOS 10.0.1上的Safari上的一个小屏幕截图： 这里是在iOS 9.3.5 Safari浏览器相同的小提琴： 作为一种解决方法，我发现使用像270.1度这样的东西解决了这个问题，但是我想知道为什么270不能正常工作，是否有更好的方法来处理它。
在iOS设备上设置原生HTML5date和时间select器的宽度
我正在使用types=date和types=时间的原生date和时间select器，用于我正在处理的网站的移动版本。 虽然input字段不尊重我的CSS。 桌面： iOS设备： 基本上我需要两个date和时间input来填充〜50％的宽度。 这是我正在使用的HTML和CSS： <div class="arriveWrapper"> <div class="arriveDateWrapper fieldWrapper"> <input class="arriveDate" name="arriveDate" type="date" placeholder="What date?" /> </div> <div class="arriveTimeWrapper fieldWrapper"> <input class="arriveTime" name="arriveTime" type="time" placeholder="What time?" /> </div> <div class="clear"></div> </div> .arriveDateWrapper { width: 49%; margin-right: 2%; float: left; position: relative; } .arriveDate { width: 100%; height: 28px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: […]
UIWebview JS性能比iOS 6/7上的移动Safari更慢吗？
我们最近从一个iOS应用程序testing了一些HTML5内容，包含大量的JavaScript库。 该应用程序旨在加载UIWebview中的这些内容。 iOS 6被用于这个testing。 我的团队没有观察到移动Safari浏览器有任何明显的性能问题。 但在networking和其他stackoverflow讨论（像这个链接 ）专家声称，UIWebview没有Nitro Javascript引擎，所以它通常比移动Safari浏览器慢得多。 这不再是最新版本的iOS（6/7testing版）的问题吗？ 有没有一种方法来衡量和观察UIWebview和Mobile Safari浏览器之间的性能差异？
Captive Wifi Popup：点击一个链接打开Safari
我们在iOS设备（ipad，iphones等）的networking上遇到问题：连接到SSID后，iphone / ipad立即打开Captivenetworking助理（CNA） – 它像一个缩小的浏览器，没有导航button等 – 显示我们的欢迎页面（准备好让用户在networking中validation他的MAC，以便给他上网）。 这个CNA是iOS的一个function，并自动发生。 我在这个论坛上环顾四周，如何让用户通过点击一个链接（在CNA中）来打开他的Safari浏览器，从而将他从CNA中发送到Safari（我更喜欢他在那里）。 我search的短语，如：“如何设置一个链接打开Safari”，但我得到的结果关于使用手机的人做这样的事情… 一位用户谈到了使用window.open（myURL，“_system”），但我不知道这是否解决了我的问题。 基本上我的计划是： – 让我的欢迎页面（用户连接到我的SSID后显示的页面）检测用户设备的浏览器types。 我的欢迎页面位于我的控制器的围墙花园的一个站点，因此每个设备都可以看到欢迎页面（是否具有完全的互联网访问）。 – 如果用户有iOS设备，CNA浏览器会自动打开。 我的控制器检测到设备有一个CNA浏览器，并加载一个简单的页面与消息（如）：“点击这里开始导航” – 在接下来的几秒钟（当用户正在消化消息），我的控制器给用户MAC完全的互联网访问 – 当用户点击CNA浏览器中的链接时，CNAclosures，然后打开Safari，并强制Safari打开目的地欢迎页面（我希望我的用户是，根据他的天线连接的）。 我真的希望一切都有意义 我发现这个链接关于在这个论坛的CNA浏览器： 旁观苹果计算机networking助理login在iOS 7 但是它说的是让用户从一开始就打开Safari（禁用CNAfunction），“希望”用户打开Safari（而不是直接转到他的一个应用程序）。 我更喜欢用户必须“点击继续”，这使Safari打开，他看到我的欢迎页面。
在iOS中添加到主屏幕时，HTML5networking应用程序无法caching
要清楚，网页应用程序caching，并在移动Safari中脱机工作正常。 问题是当它被添加到iPhone 4s和iPad 2上的主屏幕上，两者都运行iOS 6.0.1。 它不会脱机工作，并提供networking错误连接到互联网，即“无法打开MYWEBAPP MYWEBAPP无法打开，因为它没有连接到互联网” 我已经debugging了几个小时，似乎无法find解决scheme。 我没有收到控制台中的任何错误，我正在运行Jonathan Stark的debugging代码 我已经在桌面Safari，Chrome和Firefox的在线/离线开发者工具中testing了该应用。 以及使用Safari中的设备的Web Inspector。 iPhone或iPad的结果是一样的。 他们将cachingnetworking应用程序，并将在移动Safari，但不是添加到主屏幕时工作。 没有线上或线上的错误。 据我所知，我正在使用最佳实践： 添加了HTML标头： <html manifest="photo.appcache"> 我也试验过使用不同名称的清单文件，包括：cache.manifest和offline.manifest，因为我读到它有所作为，但在我的testing中，只要扩展名是什么名称都没有关系。清单或.appcache，并在.htaccess文件中适当地提供。 添加了正确的MIMEtypes： AddType text/cache-manifest appcache manifest 我也试过： AddType text/cache.manifest manifest ， AddType text/cache.manifest .manifest manifest ， AddType text/cache-manifest .manifest 我不相信这个工作： AddType text/cache.manifest但我不记得。 在大多数情况下，这并不重要，我坚持： AddType文本/caching清单appcache清单 就像HTML5 Mobile Boilerplate中那样。 添加： networking：* 到appcache文件。 我相信这可以让所有的下载以及使所有的链接工作。 我已经尝试删除这一行： <meta name="apple-mobile-web-app-capable" content="yes">因为我在这里读到了解决了类似于我的问题，但我可以确认它在我的testing中不起作用。 […]
当iPad纵向时，缩小移动Safari浏览端口的宽度？
我正在devise一个在iPad上以横向模式浏览时效果最佳的网站。 一切都在一个1024像素宽的<div>容器中。 不过，我仍然需要缩小视口，所以当用户将iPad转为纵向时，用户不必缩小或水平滚动即可查看页面上的所有内容。 目前我的<head>有<meta>标签： <meta name="viewport" content="width=1024px, initial-scale=1.0, maximum-scale=10.0" /> 在横向模式下查看页面时，一切正常显示，但是我无法获得上述所需的纵向行为。 我尝试将initial-scale改为0.75 ，而恰恰相反：所有内容都适合纵向模式，但iPad处于横向模式时会有额外的水平空间。 有什么CSS，Javascript或特殊的视口设置，我可以用它来得到这个工作？ PS我不能使用user-scalable=no 。
在Mobile Safari的iFrame上显示PDF的问题
在我们的Web应用程序中，我们使用以下代码行在iframe中显示PDF文档： <iframe id="iframeContainer" src="https://example.com/pdfdoc.pdf" style="width:100%; height:500px;"></iframe> 这在所有主要的桌面浏览器都可以正常工作，PDF缩放的宽度可以放在iFrame的范围内，垂直滚动条可以查看文档中的所有页面。 但目前我无法在移动版Safari中正确显示PDF。 在这种情况下，只有PDF的左上部分是可见的，没有任何水平或垂直的滚动条来查看文档的其余部分。 有没有人知道我解决这个问题在移动Safari？ 更新 – 2013年3月 经过几个小时的search和实验，我可以得出结论，这个问题是一个真正的混乱！ 有一堆解决scheme，但每个都远远不够完美。 任何人都与这一个挣扎我build议参考“ 在iPad问题上的iFrame策略 ”。 对于我来说，我需要写下这个，为我们的iPad用户寻找另一个解决scheme。 更新 – 2015年5月 只是在这个问题上的快速更新。 最近我已经开始使用Google Drive查看器，它大部分解决了原始问题。 只需提供PDF文档的完整path，Google将返回HTML格式的PDF解释（不要忘记设置embedded=true ）。 例如 https://drive.google.com/viewerng/viewer?embedded=true&url=www.analysis.im%2Fuploads%2Fseminar%2Fpdf-sample.pdf 我使用这个作为更小的视口的后备，并简单地embedded上面的链接到我的<iframe> 。
在iOS8 Safari中，只读input处理不正确
在Safari，iOS8中，聚焦于date或时间input会打开date或时间select器，并允许编辑只读input的内容。 在文本input中进行对焦时，工具栏的底部会显示上一个，下一个和完成button，在点按完成或点击页面上的其他input之后才会离开。 当input从Javascript以编程方式聚焦时，没有任何事情发生，但是：如果触摸事件监听器被添加到页面的某个部分，触摸任何地方都会popupdate，时间select器或工具栏，即使监听器为空。 示例代码： <input id="test1" readonly /> <input id="test2" type="date" readonly /> <input id="test3" type="time" readonly /> <script> document.getElementById('test1').focus(); window.addEventListener('touchstart', function () {}); </script> 现场示例： http : //jsfiddle.net/cw3hump4/embedded/result/ 任何想法或解决方法如何避免这种情况？ 更新： 出于可用性/可访问性的原因，我需要焦点pipe理：点击input打开一个对话框，当对话框closures时，我把焦点放回到input。 该input必须是只读的，以防止软键盘/dateselect器/时间select器popup，但不能被禁用，所以我可以设置一个值，并专注于它。
Vimeo播放器JS API在iOS中不起作用
我正在尝试使用API来播放video，但只有在您单击iOS中的播放器中的播放button之后才能起作用。 在桌面版和Android版Chrome中，它工作正常。 $(function() { var iframe = $('#player1')[0]; var player = $f(iframe); var status = $('.status'); // When the player is ready, add listeners for pause, finish, and playProgress player.addEvent('ready', function() { status.text('ready'); player.addEvent('pause', onPause); player.addEvent('finish', onFinish); player.addEvent('playProgress', onPlayProgress); }); // Call the API when a button is pressed $('button').bind('click', function() { player.api($(this).text().toLowerCase()); }); function […]
移动Safari：audio+caching清单
我有一个小型的networking应用程序，点击几个button，播放真正短的声音位。 它明确针对iOS上的移动Safari（iPad）。 在这里和其他地方阅读了关于HTML5audio在移动Safari上的几个“缺点”，并尝试了一些“黑客”和技巧之后，我坚持认为Safari很简单（因为没有更好的词）破碎： 我可以播放声音A（需要很长时间才能开始 – 我假设它是downlading [再次]？）点击buttonA.之后，点击buttonB将立即播放声音A了。 buttonC也一样。在某些情况下，它会发出不同的声音，有时甚至是正确的。 但主要是声音A.使用的格式是.aiff，现在是.m4a。 在自己写了几个小的版本后，我决定去Buzz库去处理声音加载/播放/等等。 有趣的是，他们的演示包括一个游戏，它几乎正是我所需要的， 并触发相同的错误行为。 我甚至结束了在任何标签的任何移动Safari中的任何audio播放器将播放Buzz演示游戏（！）中的特定声音的情况。 我希望caching清单可能有助于克服Apples预加载限制，强制应用程序在离线模式下点击button后播放声音。 但确认整个应用程序已被caching后，我无法在离线模式下播放/听到任何声音。 有没有人设法得到这样的东西以某种方式工作？ （看过苹果如何处理某些事情，虽然我不期待太多回应） 更新1： 在这个答案的例子导致相同的效果： 如何在iPad上使用HTML5 / Javascript合成audio 更新2： 更新iOS（和Safari）似乎解决了audio错误。 但是，caching清单似乎并不影响audio文件。 这些文件根本不可用。 删除caching清单后，应用程序可以正常工作，但将其添加到“主屏幕”并重新加载，可防止播放audio。
