Safari浏览器中用于matchMedia的addEventListener - 腾讯云开发者社区

文章/答案/技术大牛

发布

在Windows上调试iPhoneiPad的safari浏览器

Inspect来调试safari浏览器(因为iPhone上面的QQ/微信没有x5内核，所以只能调试safari了) 准备工作 Windows 10/11 - 当然win也可以，前提是PowerShell...远程调试打开你的iPhone设置，找到Safari浏览器，然后划到最下面高级，之后开启网页检查器，然后使用数据线将iPhone连接到电脑，在手机的弹窗中选择信任该电脑即可，如果没有提示可能是你没安装iTunes...浏览器(如果没有的话Edge也是平替)，输入网址chrome://inspect/#devices(如果是Edge则是edge://inspect/#devices)，点Configure......这时候在你的safari浏览器里面打开你要调试的网页，就能在Remote Target中看到了，剩下的就不用我多说了吧。...如无特殊说明《在Windows上调试iPhone/iPad的safari浏览器》为博主MoLeft原创，转载请注明原文链接为：https://moleft.cn/post-291.html

5.4K2 0

iOS 6 的 Safari 浏览器文件上传功能详解

iOS 6 给 Safari 浏览器带来的另外一个功能是文件上传，终于 Safari 终于支持 input 输入框的文件类型了，并且还支持 HTML媒体捕获（HTML Media Capture）。...选好之后，iOS 上的 Safari 和其他浏览器不同是它显示图片的截图，而不是图片的临时名称。...属性来设置我们只想拍照或者摄像：效果如下：只拍照：只摄影： Safari...文件上传功能总结除了图片和视频之外，Safari 不支持其他文件上传，比如音频，PDF 等，也不支持直接在线视频。...选择了照片和视频之后，当然是使用服务器语言对上传的文件进行处理，这个就不在这里讲了。 ----

1.7K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

Tampermonkey for Mac(油猴Safari浏览器插件) 4.17中文版

Tampermonkey for Mac是一款浏览器脚本管理插件，支持大多常见浏览器，结合脚本大全网站 greasyfork，能够方便的实现脚本旳一键安装、自动更新、快速启用等便捷功能，通过用户脚本可以实现很多实用或有趣的功能...图片Tampermonkey for Mac(油猴Safari浏览器插件)tampermonkey油猴插件特色介绍方便的脚本管理Tampermonkey 使管理您的用户脚本变得非常简单。...位于右上方的 Tampermonkey 图标显示正在运行的脚本的数量,单击图标就可以看到正在运行的脚本和可能在这个网页上运行的脚本。脚本概览Tampermonkey 概览清晰地显示所有安装的脚本。...您可以看到它们最后的更新时间,如果它们有自己的主页,您还可以对它们进行分类和其他更多的功能...设置多样性您可以为设置页面在三种不同的等级中进行选择。不常用的选项将被隐藏,通过这种方式来简化页面。...脚本自动更新您可以对脚本的检查更新频率进行设置。不再因为过时的脚本而产生漏洞。:)安全只有偏执狂才能生存!把所有不该使用脚本的网站都列入黑名单。

2.4K10 0

iOS 5 Mobile Safari中label的bug

iOS 5 Mobile Safari中label的bug 前几天在codepen上看到了不错CSS用法，今天打算在写新博客的时候使用类似的思路：用input[type=checkbox]来控制同级元素的样式...做的时候发现iOS 5下此demo无法用，于是发现了label元素的一个bug。...Sure 此时在iOS 5中，点击文字Sure，checkbox不会自动勾选！...如果是document.body绑定，那么手指按下的时候label会有样式上的变化（onclick也有此效果）。如果是一般的父div则没有此效果。...猜测此bug同样影响了iOS 5上的其他浏览器（注：这里只测试了Chrome）。iOS6上已经修复了此bug。因为手头没有设备，故没有测试iOS5之前版本是否有此bug。

9622 0

IOS safari浏览器登陆时Cookie无法保存的问题

,而安卓和pc端都可以,找了大半天bug,发现其他的苹果设备都没问题,只能一个一个的调试,结果发现设备的系统是ios8.3,在该系统下cookie没有设置上,导致没有跳转。...找了好多的资料，国内的，基本都是牛头不对马嘴，根本不是这回事。...最后直接google国外的资料，终于在第n页看到了一个帖子：http://stackoverflow.com/questions/5327341/strange-problem-with-cookies-in-safari-and-asp-net...找到问题所在了：Safari will not set cookies with non-ASCII characters in their value and other browsers can be...就是非ASCII码的汉字或符号，是不被认可的字符。那么只好对需要设置的cookie进行了UrlEncode，读取的时候再来UrlDecode。

2.2K4 0

苹果 Safari浏览器新漏洞敲响跨站用户跟踪的警钟

防欺诈软件公司 FingerprintJS 日前披露， Safari 15中的IndexedDB API执行漏洞已经被恶意网站利用，它可能被用于跟踪用户的网络浏览数据。...IndexedDB是网络浏览器提供的低级 JavaScript 应用程序编程接口 (API)，用于管理结构化数据对象（如文件和 blob类型数据）的NoSQL 数据库。...然而，Safari浏览器处理跨 iOS、iPadOS 和 macOS 系统中的 Safari IndexedDB API 的方式并非如此。...雪上加霜的是，如果用户是从浏览器窗口的同一选项卡中访问多个不同的网站的，那么即使他使用的是Safari 15浏览器中的隐私浏览模式也并不能幸免于难。...“在 OSX 操作系统上，Safari 用户可以暂时切换到另一个浏览器以避免他们的数据跨源泄漏，可是iOS 用户没有这样的选择，因为苹果禁止其他浏览器引擎。”

1.1K1 0

IOS safari浏览器登陆时Cookie无法保存的问题

近期完成了一个儿童的测评项目,测试到最后的时候发现在ipad mini上登陆成功之后无法跳转页面,而安卓和pc端都可以,找了大半天bug,发现其他的苹果设备都没问题,只能一个一个的调试,结果发现设备的系统是...找了好多的资料，国内的，基本都是牛头不对马嘴，根本不是这回事。...最后直接google国外的资料，终于在第n页看到了一个帖子：http://stackoverflow.com/questions/5327341/strange-problem-with-cookies-in-safari-and-asp-net...找到问题所在了：Safari will not set cookies with non-ASCII characters in their value and other browsers can be...就是非ASCII码的汉字或符号，是不被认可的字符。那么只好对需要设置的cookie进行了UrlEncode，读取的时候再来UrlDecode。测试结果：OK!

2.8K5 0

vue3 -- 通过简单示例，聊一聊Composition API

Vue3 中的 Composition API 便是解决这一问题；且完美支持类型推导，不再是依靠一个简单的 this 上下文来暴露 property（比如 methods 选项下的函数的 this 是指向组件实例的...() 回一个新的MediaQueryList 对象，表示指定的媒体查询字符串解析后的结果 window.matchMedia(mediaQueryString) prefers-color-scheme...在 vue2 中，我们优先想到的是采用 mixins 方式 /* perfersColorSchemeMixin.js */ export default { methods: { perfersColorSchemeUpdate...this.aspectRatioMedia.removeEventListener('change', this.aspectRatioUpdate) } } 当然我们也可以把 data 以及 created 中的内容也抽离到...mixins 中。

2K5 0

vue3 -- 通过简单示例，聊一聊Composition API

Vue3 中的 Composition API 便是解决这一问题；且完美支持类型推导，不再是依靠一个简单的 this 上下文来暴露 property（比如 methods 选项下的函数的 this 是指向组件实例的...> template> WEB API 说明示例 Window.matchMedia() 回一个新的MediaQueryList 对象，表示指定的媒体查询字符串解析后的结果 window.matchMedia...在 vue2 中，我们优先想到的是采用 mixins 方式 /* perfersColorSchemeMixin.js */ export default { methods: { perfersColorSchemeUpdate...this.aspectRatioMedia.removeEventListener('change', this.aspectRatioUpdate) } } 当然我们也可以把 data 以及 created 中的内容也抽离到...mixins 中。

6954 0

js检测夜晚（dark）模式

我最近偶然发现了这个问题，因为我有一些JavaScript代码向页面添加了图像，但是我想基于明暗模式显示不同的图像。这是俺的解决办法。...首先，检测matchMedia对象是否存在（否则浏览器不支持夜晚模式（dark mode），您可以退回到白天模式（light mode））。...这是一个完整的示例，如果图像为夜晚模式（dark mode），我将反转图像的颜色： const img = document.querySelector('#myimage') if (window.matchMedia...)"; } 但是，存在一个小问题：如果用户在使用我们的网站时更改了模式怎么办？...我们可以使用事件侦听器检测模式更改，实现代码如下所示： window.matchMedia('(prefers-color-scheme: dark)') .addEventListener

3.2K0 0

媒体查询特性 - 适应用户偏好 | perfers-reduced-motion | prefers-color-scheme | Save data

今天，我们就来了解一下关于在web中打造用户偏好的特性。适应用户偏好在过去的几年里，浏览器实现了各种功能，可以使用CSS、JavaScript或检查服务器端的首选项来响应web上的用户偏好。...这项特性是在Safari10.1中引入的，目前在Safari、IOS Safari、Firefox和Chrome的最新版本中得到支持。...perfers-reduced-motion这项特性被用于检测用户是否需要系统将其使用的动画或运动最小化。...用户可以在他们的浏览器中激活 SaveData 模式。...由于这项特性会跟踪用户，所以在Safari Technology Preview 75中被禁用了。同时，不确定其他浏览器是否也会禁用这项功能。

5622 0

网站如何适配暗色模式并实现手动、自动切换

媒体查询的优缺点很多文章会介绍你直接使用媒体查询来适配暗色模式；的确高版本的浏览器，可以提供媒体查询功能，使用CSS，加入媒体判断即可： /\* 常规浅色模式下的网页背景颜色及文本颜色 \*/ body...同时，媒体查询存在一定的兼容性问题，浏览器版本过低（如：IE 9），在查询失败时：则逻辑判断用户当前系统时间，根据时间显示暗色或亮色配色。...=== 'function'||typeof lightMedia.addEventListener === 'function') { lightMedia.addEventListener('...change', callback); darkMedia.addEventListener('change', callback); } // 监听暗色、亮色切换End 这样就可以在用户系统更改配色的同时...Tips 本次适配，标识符存储在Cookies内，且设置切换一次后，有效期为30天，实际生产环境中，存储在localStorage内可能是一个更好的选择。

10.4K16 0

让你iPhone的Safari浏览器自带翻译的方法！_Joi博客文章

---- iPhone小技巧-Safari浏览器如何自带翻译如何在Safari浏览器翻译英文网站如果你来到一堆看不懂的英文网站怎么办呢，聪明的小伙伴打开了谷歌浏览器，而一些小伙伴打开了翻译网站、App...---- 公告～1.由于网站维护问题，文章后面将加入打赏内容2.如需其它教程可以联系我,我会按内容在下次文章更新你需要的内容3.Joi博客即将迎来第二次升级，敬请期待....如果有一定了解js脚本的小伙伴，都知道一些翻译脚本，大家应该比较熟悉在Via、Alook、Chrome、Edge浏览器上使用.其实Safari浏览器也可以一定支持js脚本，那么我们就可以利用这个来实现Safari...浏览器自带翻译教程 1 开启Safari浏览器的JavaScript功能在手机的设置-Safari浏览器-高级里面打开JavaScript功能 2 在AppStore下载：微软翻译，在app...里面的设置把语言改为：简体中文 3 打开Safari浏览器，随便进一个英文的网站，点击中间的分享按钮，需要一直往下找，找到「 translate 」然后点击一下，网页就翻译成中文了不想下次一直往下翻可以把它优先级调上去

2.7K2 0

Github 是如何做到同步系统主题颜色的？

： image.png 可以更改主题模式了，其实更改主题模式也不是什么新鲜功能，有很多网站都有： image.png image.png image.png image.png 可以看到实现的方式基本就是在浏览器本地存一个数据来标识当前处于什么模式...浏览器虽然没有直接提供类似： window.addEventListener('theme-mode', event =>{ if(event.mode == 'dark'){...}else if(event.mode == 'light'){ } }) 但是我们可以通过另一个途径来实现检测主题的变化： window.matchMedia('(prefers-color-scheme...: dark)') .addEventListener('change', event => { if (event.matches) { //dark mode...} else { //light mode } }) 首先：mqList = window.matchMedia(mediaQueryString) 会返回一个 MediaQueryList

1K5 0

DarkMode(2)：深色模式解决方案——css颜色变量实现Dark Mode

这时我们已经有了生成的 dist/style.js，在这个模块中只是将样式导出为字符串并存放于数组中，我们需要 style-loader 将该数组转换成 style 标签。...CSS 的媒体查询 prefers-color-scheme 是一种用于检测用户是否有将系统的主题色设置为亮色或者暗色的 CSS 媒体特性。...利用其设置不同主题模式下的 CSS 样式，浏览器会自动根据当前系统主题加载对应的 CSS 样式。...IE 浏览器怎么办呢？...所以我们需要针对不兼容的浏览器做一些兜底处理，这里我们可以在 webpack 等构建工具中借助 post-css 的 postcss-css-variables (https://www.npmjs.com

4K1 0

从零开始学习DOM-BOM(一)

我们知道ECMAScript其实是有一个全局对象的，这个全局对象在Node中是global; 在浏览器中就是window对象; 身份二:浏览器窗口对象。...作为浏览器窗口时，提供了对浏览器操作的相关的API; Window全局对象在浏览器中，window对象就是之前经常提到的全局对象，也就是我们之前提到过GO对象: 比如在全局通过var声明的变量，...length 设置或返回窗口中的框架数量。 location 用于窗口或框架的 Location 对象。请参阅 Location 对象。 name 设置或返回窗口的名称。...matchMedia() 该方法用来检查 media query 语句，它返回一个 MediaQueryList对象。 moveBy() 可相对窗口的当前坐标把它移动指定的像素。...; hash: 哈希值; username:URL中的username(很多浏览器已经禁用); password:URL中的password(很多浏览器已经禁用); Location 对象常见的方法

7063 0

JS IOSiPhone的Safari不兼容Javascript中的Date()问题

，在做的时候个人习惯使用chrome作为调试工具，代码基本完成之后，一切正常；使用其他浏览器访问，好嘛，IE跟safari都不兼容，返回错误”Invalid Date”。...想着估计是字符串格式的问题，改成’2016/11/11 11:11:11’再测试，结果正常，以为这样应该没问题了，再用手机浏览器继续访问，android正常，iPhone继续报错，再改”Nov 11...), date = new Date(arr[0], arr[1]-1, arr[2], arr[3], arr[4], arr[5]); document.write(date); 终于可以兼容所有浏览器咯...，结论： iPhone中的safari无法解释 YYYY-MM-DD HH:mm:ss 或者YYYY/MM/DD HH:mm:ss这样的时间格式，而谷歌火狐等浏览器对这样的格式做了扩展， iPhone中的...safari所支持的格式为 YYYY,MM, DD,HH,mm,ss，这个问题纠结我大半天，真的好想把苹果的程序员拉出去枪毙10分钟，太TM特立独行了。

3.2K1 0

个人博客网站怎么适配手机端夜间模式或深色模式

就技术而言我们先就可以很简单地实现手机端浅色和夜间模式的适配，prefers-color-scheme 有 2 种值： light——浏览器宿系统使用亮色主题的界面，同时也是默认值，浏览器 privacy.resistFingerprinting...dark——浏览器宿系统使用暗色主题的界面。...还有一个已废弃的值： no-preference——浏览器宿系统使用未知主题的界面，当较旧版本的浏览器在宿系统不支持系统层级的暗色模式时会返回这个值，较旧版本的浏览器 privacy.resistFingerprinting...方法得到的 Media 使用 matches 方法来获取系统暗色模式状态： if (window.matchMedia('prefers-color-scheme: dark').matches) {...Safari 中添加了它，随后各浏览器不断跟进，现在的兼容性还算不错。

1.3K2 0

网页主题自动适配：网页跟随系统自动切换主题

：样式固定，用户无法自定义设置主题样式 JS媒体查询 JS同样拥有媒体查询的方法 matchMedia() 。...传入一个被用于媒体查询解析的字符串，返回一个用来媒体查询新的 MediaQueryList 对象，其中的 matchs 属性值就是匹配结果。...// 如果视口的宽度小于或等于600像素，则输出为true const mql = window.matchMedia('(max-width: 600px)'); console.log(mql.matchs...matchMedia("(prefers-color-scheme: dark)").addEventListener("change", event => { html.dataset.theme...'dark' : 'light'; }) 利用媒体查询还可以检测很多内容，比如：浏览器可视区域尺寸、设备尺寸、设备目前处于横向还是纵向、检测设备宽高比、设备颜色位数等本文共 824 个字数,平均阅读时长

8501 0

一步到位：三行CSS代码轻松实现全网站暗黑模式

该博文提到，关键字一般反映用户、浏览器或操作系统做出的默认颜色选择。这些关键字通常用于浏览器的默认样式表。通过这种方式，我们可以轻松地实现网站的暗黑模式。.../h1> 在样式表中，添加: body { color-scheme: light dark; } 这会告诉浏览器，document 可以接受亮色和暗色的 color-scheme...这是一个浅色模式演示，在Safari中展示了可用的系统颜色：如果我们切换到深色模式，某些颜色会完全改变（就像我们已经遇到的 Canvas 和 CanvasText ），而其他颜色只会稍微改变：使用系统颜色进行黑暗模式是一种简化的黑暗模式体验...，是在深色模式中制作颜色变化的一种广泛使用的方法。...这是通过 JavaScript 完成的： window.matchMedia('(prefers-color-scheme: dark)').matches)) { document.documentElement.classList.add

2.3K3 0

点击加载更多

在Windows上调试iPhoneiPad的safari浏览器

iOS 6 的 Safari 浏览器文件上传功能详解

Tampermonkey for Mac(油猴Safari浏览器插件) 4.17中文版

iOS 5 Mobile Safari中label的bug

IOS safari浏览器登陆时Cookie无法保存的问题

苹果 Safari浏览器新漏洞敲响跨站用户跟踪的警钟

IOS safari浏览器登陆时Cookie无法保存的问题

vue3 -- 通过简单示例，聊一聊Composition API

vue3 -- 通过简单示例，聊一聊Composition API

js检测夜晚（dark）模式

媒体查询特性 - 适应用户偏好 | perfers-reduced-motion | prefers-color-scheme | Save data

网站如何适配暗色模式并实现手动、自动切换

让你iPhone的Safari浏览器自带翻译的方法！_Joi博客文章

Github 是如何做到同步系统主题颜色的？

DarkMode(2)：深色模式解决方案——css颜色变量实现Dark Mode

从零开始学习DOM-BOM(一)

JS IOSiPhone的Safari不兼容Javascript中的Date()问题

个人博客网站怎么适配手机端夜间模式或深色模式

网页主题自动适配：网页跟随系统自动切换主题

一步到位：三行CSS代码轻松实现全网站暗黑模式

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐