Tag: JavaScript
将视口设置为缩放以适应宽度和高度
我正在一个适合特定宽度和高度的网站（885×610 div，1px边框和3px顶部边距）。 我希望用户不必滚动或缩放以查看整个div; 它应该始终是完全可见的。 由于设备具有各种分辨率和宽高比，所以想到的想法是用JavaScriptdynamic设置“视口”元标记。 这样，div将始终是相同的尺寸，不同的设备将不得不以不同的方式进行放大，以便将整个div放在视口中。 我尝试了我的想法，并得到了一些奇怪的结果。 以下代码适用于首页加载（在Android 4.4.0的Chrome 32.0.1700.99中testing），但在刷新时，缩放级别会发生变化。 另外，如果我注释掉alert ，即使在首页加载时也不起作用。 小提琴 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"> <script type="text/javascript"> function getViewportWidth() { if (window.innerWidth) { return window.innerWidth; } else if (document.body && document.body.offsetWidth) { return document.body.offsetWidth; } else { return 0; } } function getViewportHeight() { if […]
iOS：禁用反弹滚动，但允许正常滚动
当用户点击页面边缘时，我不希望网站内容晃动。 我只是想让它停下来。 我到处看到的全方位的javascript解决scheme是这样的： $(document).bind( 'touchmove', function(e) { e.preventDefault(); } ); 但是这可以防止完全滚动。 有没有办法来消除反弹。 最好用CSS或一个元标签而不是JS，但任何有效的工作将会做。
使用-webkit溢出滚动时的当前滚动位置：touch – Safari iOS JavaScript事件（scrollTop / scrollLeft）
我正在使用-webkit溢出滚动：触摸来使溢出：滚动div; 通过iOS touch事件平滑滚动。 它出色地工作，除了在滚动时不会更新element.scrollTop或element.scrollLeft。 它只会更新element.scrollTop /触发一个滚动事件，当动量用完，它停止。 有没有人知道find当前滚动位置的方法，如果有事件我可以听？ 我想知道是否可以通过CSS3属性find它？ 谢谢 以下示例显示了两次尝试： <!DOCTYPE html> <body> <div id="display_a">Scroll is: 0</div> <div id="display_b">Scroll is: 0</div> <div id="element" style="width:800px;overflow-x:scroll;-webkit-overflow-scrolling:touch;"> <div style="font-size:100px;width:1850px;"> abcdefghijklmnopqrstu vwxyz </div> </div> <script> var e = document.getElementById("element"); var display_a = document.getElementById("display_a"); var display_b = document.getElementById("display_b"); e.addEventListener("scroll",function(event){display_a.innerHTML = "Scroll is: " + event.target.scrollLeft;}); setInterval(function(){display_b.innerHTML = "Scroll is: " […]
如何使用phonegap在iOS应用程序中打开网页？
我想在我的iOS phonegap应用程序只有一个视图。 这个视图将是一个网页。 我如何加载这个唯一的观点与特定的url？ 我想你通过JavaScript来做到这一点，如果是的话，怎么样？ *我不是一个HTML / JavaScript脚本，我只开发原生的iOS应用程序，但我需要用phonegaptesting一些东西。
JavaScript touchend与点击困境
我正在使用一些JavaScript UI，并使用大量触摸事件（如“touchend”）来改善触摸设备的响应。 但是，有一些逻辑问题，正在窃听我… 我看到许多开发者在同一个事件中混合了“touchend”和“click”。 在许多情况下，它不会受到伤害，但本质上这个function会触发两次触摸设备： button.on('click touchend', function(event) { // this fires twice on touch devices }); 有人build议，可以检测触摸function，并适当地设置事件，例如： var myEvent = ('ontouchstart' in document.documentElement) ? 'touchend' : 'click'; button.on(myEvent, function(event) { // this fires only once regardless of device }); 上面的问题是，它会打破支持触摸和鼠标的设备。 如果用户当前正在双input设备上使用鼠标，则“点击”将不会触发，因为只有“touchend”被分配给该button。 另一种解决scheme是检测设备（例如“iOS”），并根据以下事件分配事件： 在iPad中触发两次Click事件 。 当然，上面链接中的解决scheme只适用于iOS（不适用于Android或其他设备），似乎更像是一种“黑客”（hack）来解决相当基本的问题。 另一种解决scheme是检测鼠标移动，并将其与触摸function相结合，以确定用户是在鼠标上还是在触摸上。 问题当然是，用户可能不想移动鼠标，当你想检测到它… 我能想到的最可靠的解决scheme是使用一个简单的去抖function来简单地确保该function仅在短时间间隔内触发一次（例如100ms）： button.on('click touchend', $.debounce(100, function(event) { // […]
是否有可能在iOS 7 Safari中隐藏地址栏？
是否可以隐藏iOS 7中的地址栏？ 我目前使用下面在iOS 6中做到这一点，但我只是更新xCode和testing在iPhone SIM和iOS 7 Safari浏览器没有响应这一点。 JS： window.addEventListener("load",function() { // Set a timeout… setTimeout(function(){ // Hide the address bar! window.scrollTo(0, 1); }, 0); });
iOS Chrome检测
我使用Javascript代码 if( (Android|webOS|iPhone|iPad|iPod|BlackBerry).test(navigator.userAgent) ) {} 用于移动设备检测，但iOS中的Chrome未被检测到。 有没有办法检测到它？ 谢谢。
移动Safari页面卸载/隐藏/模糊深入链接
我正在寻找移动Safari浏览器上的一个事件，它将检测到页面由于redirect而被隐藏。 我想直接打开我的应用程序，如果用户已经安装，然后尝试Facebook的，如果安装，如果没有，然后转到该网页的ID。 如果安装了“myapp”，则打开myapp。 但Safari浏览器标签仍然被redirect到facebook.com 如果'myapp'没有安装，但Facebook是，那么Facebook的iOS应用程序被打开。 但Safari浏览器标签仍然被redirect到facebook.com 我用下面的HTML / JS创build了一个testing链接 ： <!DOCTYPE html> <html> <head> <title>Redirect Test</title> <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script> <meta name='viewport' content='initial-scale = 1.0,maximum-scale = 1.0' /> </head> <body> <button>Open Oreo</button> <script type='text/javascript'> jQuery(function(){ jQuery( 'button' ).on( 'click', function(){ var myid = null, fbid = null; // Watch for page leave to kill timers jQuery( […]
防止整页滚动iOS
在移动Safari浏览器下，是否可以允许一个绝对定位的div滚动，而不允许整个页面上下滚动，当滚动到达边缘（弹性滚动）？ 这是我正面临的问题的一个最小工作示例： <!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes" /> <style> * { margin: 0; padding: 0; box-sizing: border-box; } #a, #b { position: absolute; top: 0; left: 0; height: 100%; padding: 10px; overflow: auto; } #a { width: 80px; background: #f00; } #b { background: […]
我如何监视WKWebview的请求？
我如何监视WKWebview的请求？ 我尝试使用NSURLprotocol（canInitWithRequest），但它不会监视Ajax请求（XHR），只有导航请求（文档请求）
