safari 相关问题

Safari是Apple的网络浏览器,是macOS和iOS上的默认浏览器。

如何阻止 Safari 和 google chrome 中的 html5 视频下方出现黑线

链接到我正在尝试排序的页面 我在这个页面上有一些 html5 视频,并且我已经设法对其进行排序,因此我对它在大多数浏览器中工作并在这些浏览器中显示图像感到满意

回答 5 投票 0

如何隐藏 Safari 中不适合块的文本?

在 Chrome 中,这是默认工作的(参见屏幕截图)。不适合的文本会自动隐藏。但在 Safari 和 Mozilla 中则不然。请帮忙 筛选这次旅行 屏蔽这个 chrome(怎么做

回答 1 投票 0

Safari 从我的 Web 扩展中隐藏图像(修改图像 src)

我为 Chrome 和 Firefox 构建了一个网络扩展。之后,我希望也能在 Safari 上使用它。 为此,我使用了带有选项 safari-web-extension-converter 的 xcrun 命令。 ...

回答 1 投票 0

有办法解决 Safari 的最小字体大小吗?

JSBIN:https://jsbin.com/subipamero/edit?html,css,output HTML: 这是 20 像素的文本 这应该显示为 4px 大小的文本 (20px * .2) JSBIN:https://jsbin.com/subipamero/edit?html,css,输出 HTML: <div>This is 20px text</div> <div class="shrunk">This should appear as 4px size text (20px * .2)</div> CSS: div { font-size: 20px; margin: 20px; } div.shrunk { zoom: .2; } JSBIN 示例呈现两个 div。文本设置为 20px。然而,第二个 div 上设置了 zoom: .2。 如果您在 Safari 和 Chrome 中并排打开这些内容,您会发现 Safari 中的缩放文本更大。如果您使用 Safari 中的缩放设置,您会发现有一个充当最小字体大小设置的东西,您根本无法将文本缩小得更小。 有人知道为什么 Safari 会这样做吗?有没有办法克服这个问题? 我应该注意,我没有将 Safari 首选项设置为“从不渲染小于 x 大小的类型”。 问题是我正在设计一个信息亭,它会被卡在特定的长宽比上。但所使用的浏览器(全屏)的大小可能会有所不同(目前未知变量)。 所以我只是使用一点 JS 来缩放内容以适应任何视口大小。 在 Chrome 中,这意味着无论我将浏览器设置为什么大小,屏幕上的所有内容都会作为一个整体进行缩放,并且不会出现任何中断(除了它太小而无法阅读/查看)。 但是在 Safari 中,由于这个奇怪的字体问题,当你缩小内容时,它很快就会崩溃。 我猜 Safari 就是这样,我可能可以通过一些更周到的设计/布局更改来解决这个问题。但我很好奇 Safari 在这里做什么,如果它是已知的事情的话。 更新:有人指出我这个关于使用-webkit-text-size-adjust: 100%的答案。这可能会“修复”移动 Safari 中的问题,但在桌面上不起作用。 是的,Safari 似乎有一个下限,可以防止文本在值小于 zoom 时受到 0.5 的影响。我们可以从缩放文本的渲染结果中看到这一点 1~0.1: <p style="zoom:1.0">text at zoom:1.0</p> <p style="zoom:0.9">text at zoom:0.9</p> <p style="zoom:0.8">text at zoom:0.8</p> <p style="zoom:0.7">text at zoom:0.7</p> <p style="zoom:0.6">text at zoom:0.6</p> <p style="zoom:0.5">text at zoom:0.5</p> <p style="zoom:0.4">text at zoom:0.4</p> <p style="zoom:0.3">text at zoom:0.3</p> <p style="zoom:0.2">text at zoom:0.2</p> <p style="zoom:0.1">text at zoom:0.1</p> 以下是该文本在三个 Mac 桌面浏览器中的呈现方式: 铬 野生动物园 火狐 几乎可以肯定,苹果选择这样做是出于可访问性的原因。当设计师假设所有观众的视力都和他们自己一样好时,文本太小而难以阅读是一个经常出现的问题。苹果非常重视可访问性,所以看到这个限制我并不感到惊讶。我并不是说我同意设置硬性限制,因为这对于某些 CSS 动画来说可能是一个问题,防止出现“淡出”类型的缩小效果,仅举一个例子。 如何解决这个问题? 我能想到几个选项。 首先,必须问一个问题:为什么您希望设计中的文本太小而难以阅读? 我能想到几个有效的用例: 用例 1:类似图像的文本用法 您的设计包含其他设计的缩略图 - 例如,您有一个宣传书籍的广告横幅。这本书的封面位于横幅上。这本书的封面上有一些文字太小而无法阅读,但我们仍然了解其要点,所以没关系。在这种情况下,请将书籍封面转换为图像(如果尚未转换为图像)。 在某些情况下,将文本转换为 SVG 或其他图像格式是可以的。对于文本来说,矢量格式通常优于光栅格式。如果您的文本看起来那么小,那么它可能无法像普通文本一样发挥作用。考虑将其视为图像。 用例 2:带有动画过渡的文本 文本 zoom 属性将被动画化(如上所述)。在这种情况下,请考虑对其他 CSS 属性进行动画处理,例如 transform scale() translate(); 请注意,scale()具有不幸的副作用,即相对于其transform-origin偏移元素。这是没有办法的——这就是缩放的作用。而translate()往往需要与scale()配合使用来抵消定位变化。 我暂时保留这个答案。但如果你能描述这个小文本的目的和功能,以及为什么你相信它不会给你的听众带来问题,我可能会有更多的想法。也许有更好的方法来完成您正在尝试做的事情。

回答 1 投票 0

Safari 上的 CSS 背景图像相对路径 var() 不加载图像

不确定是否有人遇到过这个问题(我见过类似的问题,但不完全一样),但是在 Mac OSX Safari 浏览器上,当您使用变量作为相对图像位置时,会发生以下问题...

回答 3 投票 0

iPhone 和 iPad 未显示/未获取下一个 js 应用程序中客户端渲染的 API 响应

iPhone 和 iPad 未显示/未获取下一个 js 应用程序的 API 响应。 UI 不显示客户端渲染的数据。但显示服务器端渲染成功的数据。 这个问题发生了...

回答 1 投票 0

使用“::marker”和“content”制作自定义列表标记

我尝试创建一个带有自定义列表标记的列表。 这是来自 MDN 的示例: li::标记{ 内容:'✝'; 字体大小:1.2em; } 被称为水星七号的团体: ... 我尝试创建一个带有自定义列表标记的列表。 这是来自 MDN 的示例: li::marker { content: '✝ '; font-size: 1.2em; } <p>Group known as Mercury Seven:</p> <ul> <li>Malcolm Scott Carpenter</li> <li>Leroy Gordon (Gordo) Cooper Jr.</li> <li>John Herschel Glenn Jr.</li> <li>Virgil Ivan (Gus) Grissom</li> <li>Walter Marty (Wally) Schirra Jr.</li> <li>Alan Bartlett Shepard Jr.</li> <li>Donald Kent (Deke) Slayton</li> </ul> 我期望看到的是 ✝ Malcolm Scott Carpenter ✝ Leroy Gordon (Gordo) Cooper Jr. etc. 但相反,我明白了 * Malcolm Scott Carpenter * Leroy Gordon (Gordo) Cooper Jr. etc. 是 Safari 的问题还是 MDN 示例错误/过时? 正如评论中Paulie_D的回答,这是一个错误:https://webkit.org/b/204163

回答 1 投票 0

ios应用css时为什么要写'-webkit-touch-callout: none'?

我正在编写一个仅适用于iOS的css。 当我搜索时,大多数人都使用“@support(-webkit-touch-callout:none)”来编写CSS。 触摸标注是按住

回答 2 投票 0

Safari 字体粗细问题,文字太粗

当我应用 font-weight:bold 样式时,与其他浏览器相比,Safari 中的字体外观过于粗体。我按照某些网站的建议尝试了下面的 css,但它仍然是一样的。 文字阴影:#

回答 6 投票 0

如何在 Safari 上删除这个不需要的表格单元格水平填充?

我正在使用表格:https://codepen.io/Offirmo/full/rNgjdEb Chrome 和 Firefox 不会水平填充单元格 Safari 会这样做,使表格显得更大 我用谷歌搜索了一下,添加了 margin+padding: 0,

回答 1 投票 0

AppleScript 可促进在 Safari 浏览器中打印为 PDF

我编写了一个AppleScript,其目的是触发Safari 的“打印到pdf”功能。当尝试从菜单中选择“另存为 PDF”时,脚本在第 14 行失败...

回答 2 投票 0

Safari 上的跨站点跟踪不允许快速会话发送 cookie

所以我构建了一个使用护照和快速会话进行身份验证的应用程序。当我部署时,我发现 safari 不允许快速会话工作,直到我关闭“跨站点跟踪...”

回答 2 投票 0

无法通过Applescript在Safari上调用Javascript

我正在尝试确定选项卡是否通过 JavaScript 播放音频,该 JavaScript 由以下 applescript 调用: 告诉应用程序“Safari” 将脚本设置为“!!Array.prototyp...

回答 1 投票 0

在 Firefox 和 Safari 的 CSS calc() 中获取百分比?

我使用以下 calc() 方程来计算两个 div 的宽度: CSS 。我的课 { 宽度:计算((100% - 800px)/ 2); 宽度:-moz-calc((100% - 800px) / 2); 宽度:-webkit-calc((...

回答 4 投票 0

scrollIntoView 在 safari 浏览器中无法按预期工作

我有这个可滚动的div,里面有一个SVG,其中有给定id的点。我想将选定的点与 div 的中心对齐,我有这个解决方案 document.getElementById("

回答 2 投票 0

在 Linux 或 Windows 计算机上调试 Mobile Safari

我知道可以通过这种方法调试移动Safari。 它要求您在计算机上安装 Safari。 移动 Safari 会在您的桌面 Safari 上进行模拟,为您提供标准的 w...

回答 2 投票 0

Google Apps 脚本“google.script.run”无法在 Safari 上运行

我在 Google 表格中使用 Apps 脚本。我打开一个对话框(工作正常),然后当我单击“Go”按钮时,我希望handleGo运行并显示“GO-ing!”。它在 Chrome 上运行良好,但是...

回答 1 投票 0

如何在iPhone上查看本地主机

如何在 iPhone 上查看我的本地主机?我的电脑上的地址是 http://localhost,它使用相同的互联网连接。 我在 Safari 上尝试了 localhost:4000 但无法打开该页面。甚至尝试过...

回答 1 投票 0

自动播放视频无法在制作中的 iOS (Safari) 上播放

我想在我的反应应用程序上添加循环视频。 我是这样做的 我想在我的反应应用程序上添加循环视频。 我就是这样做的 <video ref={videoRef} playsInline autoPlay muted loop> <source src={Video} type='video/mp4' /> </video> 它在移动设备和桌面上的 Chrome/Firefox 上运行良好。 但它不能在iPhone(Safari)上播放。 它正在“本地”播放,但是当我“部署”它时。它没有播放:( 我与之前的项目有类似的要求,以下代码工作正常,从此我们将有一个静音视频运行循环与自动播放。 <video width="300px" height="500px" autoplay="autoplay" muted loop> <source src="https://user-images.githubusercontent.com/27606753/144578902-9b14dc56-9056-4650-942f-4d25f0ecbcc1.mp4" type="video/mp4" /> </video> 之所以如此,是因为根据 apple 文档,视频仅在以下情况下自动播放: 它包含 playsinline 属性,并且 它没有音轨,或者它包含 muted 属性。 所以我建议您包含 playsinline 属性。了解有关内联播放的更多信息此处。 我创建了一个沙箱并部署了,但无法在iOS 15.2(iPhone 12)上重现您的问题,它会按预期自动播放和循环。可以添加更多细节吗? 最新更新-> 谁面临过问题 保持属性顺序如下 playsInline autoPlay muted loop 然后就可以了视频源是本地文件还是url并不重要,属性顺序很重要,我自己也不知道原因。

回答 4 投票 0

移动 - SAFARI:在将固定位置应用于身体时防止滚动重置到移动设备顶部

我的网站上有一个弹出窗口,它可以从隐藏,最小化,到全屏状态,当全屏时,我显然想阻止后面页面的滚动。所以我添加和删除 noscroll

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.