safari | 易学教程

screenX / Y，clientX / Y和pageX / Y有什么区别？

阅读更多关于 screenX / Y，clientX / Y和pageX / Y有什么区别？

screenX / Y ， clientX / Y 和 pageX / Y 什么 pageX ？另外，对于iPad Safari，计算结果是否与台式机相似？还是因为视口而有所不同？如果您能指出一个例子，那就太好了。 #1楼 pageX / Y 给出相对于CSS像素中 <html> 元素的坐标。 clientX / Y 以CSS像素给出相对于 viewport 的坐标。 screenX / Y 以设备像素为单位给出相对于 screen 的坐标。关于您的最后一个问题，在台式机和移动浏览器上计算是否相似...为了更好地理解-在移动浏览器上，我们需要区分两个新概念：布局视口和可视视口。可视视口是页面上当前显示在屏幕上的部分。布局视口是在桌面浏览器上呈现的整个页面（包括在当前视口中不可见的所有元素）的同义词。在移动浏览器中， pageX 和 pageY 仍相对于页面以CSS像素为单位，因此您可以获得相对于文档页面的鼠标坐标。另一方面， clientX 和 clientY 定义相对于可视视口的鼠标坐标。关于可视化视口和布局视口之间的区别，这里还有另一个stackoverflow线程：可视化视口和布局视口之间的区别？另一个很好的资源： http : //www.quirksmode.org/mobile/viewports2.html #2楼这是一张图片，解释

Safari调试工具

阅读更多关于 Safari调试工具

一直以来认为Safari在Web调试上是个残疾直到今天才发现一直错怪了它... 而且... 它用的居然和Chrome是一个调试工具 - Web Inspector 只是Chrome在这点上做的比Safari好一开始就把Web Inspector给Enable了而且做了一些扩展并给了它另外一个名字 - Develop Tools 而Safari把它隐藏的太深了以至于像我这样会玩软件设置的人都... 如何Enable - SafariPrefernces --> Advanced最下面的选项勾选然后你就可以在右键菜单上看到Inspect Element选项了 - 跟Chrome一模一样来看看两个的界面 Safari Web Inspector: Chrome Develop Tools: 界面看起来几乎一样本来就是一个东西么区别就在Chrome多了一些功能再看仔细一点 Safari上面的那个标尺更圆润一点猜是Safari对HTML5 Vanvas的支持更强大一点毕竟人家是Canvas的发明者啊调CSS和JS 在Safari上没问题啦！以上为转载！以下为自己测试，Safari中文版设置： ‘编辑’菜单---’偏好设置‘ （ctrl+，），选择‘高级’选项卡，选择最后的复选框‘在菜单中显示开发’菜单来源： https://www.cnblogs

如何防止favicon.ico请求？

阅读更多关于如何防止favicon.ico请求？

我没有favicon.ico，但IE总是提出请求。是否可以阻止浏览器从我的网站请求favicon？也许HTML标题中有一些META-TAG？ #1楼你不能。您所能做的就是使该图像尽可能小，并在将来设置一些缓存失效标头（ Expires ， Cache-Control ）。这就是雅虎！不得不说有关favicon.ico的请求。 #2楼我首先要说的是，在网页中使用favicon是一件好事（通常）。然而，并不总是需要它，有时开发人员需要一种方法来避免额外的有效载荷。例如，IFRAME会在不显示的情况下请求图标。最糟糕的是，在Chrome和Android中，IFRAME会产生3个关于favicon的请求： "GET /favicon.ico HTTP/1.1" 404 183 "GET /apple-touch-icon-precomposed.png HTTP/1.1" 404 197 "GET /apple-touch-icon.png HTTP/1.1" 404 189 以下使用数据URI，可用于避免假的favicon请求： <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon"> 有关参考，请参阅此处 https://github.com/h5bp/html5

查看Safari和钥匙串中的密码

阅读更多关于查看Safari和钥匙串中的密码

Safari Safari的同步书签功能很棒，还可以看到其他设备没关掉的网页。为了省时间，一些经常进的网站，比如博客，邮箱等，我都会选择让Safari保存密码，还使用iCloud同步！因为一直很放心苹果的安全性，可事实并非如此，只要知道了你的电脑密码，你的网页账号就全部被人知道了！！！现在你可以试试，打开Safari -> 偏好设置 -> 密码，你可以看到Safari帮你保存的所有网站账号及密码，现在看起来密码好像还很安全。 Cmd + A 全选，然后点击左下角的 □显示所选网站的密码，会弹出输入开机密码提示框。也许你的 Apple id 比较不容易给别人，但是开机密码你应该会比较放心一点，而且如果用公司电脑的话，开机密码大家都是一样的（我们公司是），就更危险了。看到自己所有密码暴露的那一刻，冷汗都出来了！记住： 1.别在公用电脑上保存你的密码 2.别随便把你的电脑开机密码告诉别人 3.不在不属于自己的电脑上使用iCloud，使用后也记得注销钥匙串这里再提醒大家稍稍注意一下自己的信息安全。再打开Launchpad -> 其他 ->钥匙串访问。一般我来这都是为了看Wifi密码的。可是今天仔细一瞧，还有保存的应用程序密码。不过呢还好这里的应用程序密码都加了密，你直接看（右键显示简介 -> 显示密码 ->输入开机密码）是一串英文数字，右键拷贝也不能使用。但奇怪的是

背景颜色：无效的CSS？

阅读更多关于背景颜色：无效的CSS？

谁能告诉我以下CSS是否有效？ .class { background-color:none; } #1楼答案是不。不正确 .class { background-color: none; /* do not do this */ } 正确 .class { background-color: transparent; } background-color: transparent 完成同样的事情 background-color: none 。 #2楼 .class { background-color:none; } 这不是有效的财产。 W3C验证器将显示以下错误：值错误：background-color none不是背景颜色值：无在开发CSS规范期间，可能已选择 transparent 作为更好的术语而不是 0 或 none 值。 #3楼 CSS Level 3指定未 unset 属性值。来自 MDN ：未设置的CSS关键字是初始关键字和继承关键字的组合。与其他两个CSS范围的关键字一样，它可以应用于任何CSS属性，包括CSS简写全部。如果该属性从其父级继承，则将该属性重置为其继承的值，否则重置为其初始值。换句话说，它的行为类似于第一种情况下的inherit关键字，就像第二种情况下的initial关键字一样。不幸的是，目前在所有浏览器中都不支持此值

各种场景唤起 App 骚操作

阅读更多关于各种场景唤起 App 骚操作

唤起 App 应该是很常见的问题了。我们在开发 H5 的时候，有一些链路上的功能在 H5 不支持，只能去 App 才能完成。比如，下单、支付等功能。那么在更多的场景能够唤起 App 就显得很重要了。几步走判断浏览器，动态加载对应浏览器的下载逻辑通过 universal link 、 URL Scheme 、 a 标签、 iframe 几种方式找出最适合这个浏览器的唤起方式。如果下载了 App，就会走打开逻辑，如果没有下载则走下载逻辑。如果已知不能唤起的浏览器引导其它浏览器打开流程：各个唤起方法对比没有哪种方式是完美的，每种唤起方式都有它的优势跟劣势，只有将所有的唤起方法在不同浏览器上尝试过才能择优使用。通用链接（universal link）通用链接 universal link 是 IOS 9.0 版本以上才可以使用的新的特性。此特性类似于深层链接，并能够方便地通过打开一个 https 链接来直接启动您的客户端应用(手机有安装 App)。对比起以往所使用的 URL Scheme , 这种新特性在实现 web-app 的无缝链接时能够提供极佳的用户体验。体验一下通用链接我们可以来体验一下，左边的是通用链接 universal link 方式，右边是 URL Scheme 方式。左边可以直接将 App 打开，而右边需要确认是否打开才可以。

Sound Control for Mac(mac应用音量控制软件) v2.4.1

阅读更多关于 Sound Control for Mac(mac应用音量控制软件) v2.4.1

哪有mac上的音量控制软件？sound control mac版可以帮助用户控制某个独立应用程序的音量，通过每应用音量，均衡器，平衡和音频路由独立控制每个应用的音频，还有整个系统的音量！ Sound Control for Mac 下载 https://www.macdown.com/mac/3841.html sound control mac版功能亮点每个应用程序的音量控制独立控制应用的数量。键盘音量添加键盘音量控制，DisplayPort显示器，HDMI电视和接收器以及其他缺少它们的设备。应用程序EQ 使用系统范围的EQ或在每个应用程序上设置不同的EQ。每个EQ可以是10或31个频段。触摸栏支持使用MacBook Pro上的触控条控制应用程序音量。每个应用程序余额独立调整每个应用程序的左/右平衡。还可以选择向下混合到单声道，允许您将所有音频移动到左或右声道。 Sound Control for Mac下载特色介绍完整的热键控制设置热键以控制前景应用的音量，静音和均衡器。甚至还有一个热键来静音所有后台应用程序。每应用音频路由将应用音频重新路由到任何音频输出设备。将iTunes发送到外部USB设备，而其他应用程序则使用MacBook的内置扬声器。兼容在macOS 10.11 - 10.14.x上受支持，包括macOS Mojave。

H5开发遇到的问题，以及苹果兼容的一些坑

阅读更多关于 H5开发遇到的问题，以及苹果兼容的一些坑

1.H5的localStorage第二次打开的时候不会清除，例如：微信公众号第一次登陆之后存一个 localStorage.setItem("login","true"); 然后关闭微信，再重新进去，获取 localStorage.getItem("login"); 这个打印出来的值是为true的。 2.苹果手机微信用的WKWebview内核，跨域请求接口的时候不会携带上cookie，无法验证登录，会导致接口无权限或者404。解决方法：服务器采用nginx反向代理，项目和请求接口的链接都换成相同的域名，解决跨域问题，也解决了苹果微信跨域请求不携带cookie的问题。 3.vue项目保存登录状态的问题，刷新后导致全局变量改变，登录状态还原导致刷新就会退出登录。解决方法：刷新的时候把全局变量存到localStorage window.addEventListener("beforeunload",()=>{ localStorage.setItem("userState",JSON.stringify(state)) }); 在页面重新加载时再从localStorage里面更新全局变量 localStorage.getItem("userState") && this.$store.replaceState(Object.assign(this.$store.state,JSON

单击手机网页中的链接时如何触发电话

阅读更多关于单击手机网页中的链接时如何触发电话

我需要为移动设备构建一个网页。只有一件事我还没弄明白：如何通过点击文字来触发电话？是否有一个特殊的URL我可以输入，如 mailto: 标签的电子邮件？设备特定解决方案不是优选的。我知道iPhone会自动识别电话号码并为此创建一个链接，但如果可以对图像进行此操作也会很棒......对大多数移动设备也是如此。 #1楼正确的URL方案是tel：[number]所以你会这样做 <a href="tel:5551234567"><img src="callme.jpg" /></a> #2楼大多数现代设备都支持tel：scheme。所以使用 <a href="tel:555-555-5555">555-555-5555</a> ，你应该很高兴。如果你想将它用于图像， <a> 标签可以处理放置在其中的 <img/> ，就像其他正常情况一样： <a href="tel:555-555-5555"><img src="path/to/phone/icon.jpg" /></a> #3楼为了完整起见，想在这里添加答案。 <a href="tel:1234567">Call 123-4567</a> 在大多数设备上工作得很好。但是，在桌面上，这将显示为一个链接，当您单击它时不会执行任何操作，因此您应该考虑使用CSS使其仅在移动设备上有条件地可见。此外，您应该知道Skype

查询字符串的最大可能长度是多少？

阅读更多关于查询字符串的最大可能长度是多少？

它依赖于浏览器吗？另外，不同的Web堆栈对于从请求中获取的数据量有不同的限制吗？ #1楼虽然官方没有限制，但许多安全配置建议声明服务器上的maxQueryStrings应设置为1024的最大字符数限制，而包含查询字符串的整个URL应设置为最多2048个字符。这是为了防止Web服务器上的慢速HTTP请求漏洞，以防止出现在Qualys Web应用程序扫描程序和其他安全扫描程序上的慢速DDOS攻击。请参阅以下带有Web.config的Windows IIS服务器代码： <security> <requestFiltering> <requestLimits maxQueryString="1024" maxUrl="2048"> <headerLimits> <add header="Content-type" sizeLimit="100" /> </headerLimits> </requestLimits> </requestFiltering> </security> #2楼不同的Web堆栈确实支持不同长度的http请求。我从经验中知道早期的Safari堆栈只支持4000个字符，因此因用户状态而难以处理ASP.net页面。这甚至适用于POST，因此您必须检查浏览器并查看堆栈限制。我认为即使在较新的浏览器上你也可能达到极限。我记不起了，但其中一个（IE6，我认为

订阅 safari