问题标签 [client-hints]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
3 回答
14176 浏览

xhtml - 移动设备分辨率(宽、高)屏幕尺寸表头

在来自用户代理的 http 标头中指定“屏幕大小”似乎没有真正的标准。

例如,下面的两个标题:

或者

是两个常用的标头。第二个主要由 Windows Mobile 设备使用。X-UP看起来像是来自 UP 浏览器网关。

另一种选择是

X-Screen-Width 可能是一个向上的标题。

我的问题是:

未来我们的“转码器”采用什么好的标准?它并不是真正的完整网络浏览器,但主要用于有限的网站。但它应该是Opera Mini/GWT等采用的标准。

Opera Mini 和 Google Web Transcoder 都不会通过其 HTTP 请求发送此信息。我猜他们希望网站在服务器端查找手机型号,从而查找屏幕宽度和高度。

我实际上发现了这个名为 HTTP Header Field Registrations 的RFC 4229 。它有点过时了,并且是为修复做出贡献的使命。

如果我必须查看该领域最常用的东西,我可能最终会选择“UA-Pixels”。

更多参考资料

  • 某些设备(主要还是 Windows Mobile)在用户代理标头中具有 320x240 值
0 投票
1 回答
972 浏览

javascript - 谷歌分析如何检测安卓设备

我知道 GA 使用 UserAgent 字符串来检测 Android 设备的设备 ID 或品牌名称。但我想知道谷歌是使用WURLF 库还是他们为自己构建和设备的用户代理数据库。

因为我们公司有一个将用户代理更新到 WURLF 但在 GA 中的 android 设备,它仍然没有设置。

0 投票
2 回答
12427 浏览

html - 在 Microsoft Edge 中接受属性

有人知道如何接受在 Edge 中工作吗?

<input type="file" accept=".csv">

在 Chrome 44、Firefox 39、IE 11、Opera 31 中运行良好。

也试过

<input type="file" accept=".csv,text/csv">

0 投票
1 回答
767 浏览

video - 适用于 Windows 10+ 移动版的 UPLOAD 视频捕获

我一直在研究用于Windows 10 移动版的UPLOAD视频捕获,目前看来不可能。我正在使用以下内容:

这允许您选择移动网络摄像头作为来源,但您只能拍照。在 Android 和 iOS 上,相机打开准备录制视频,您可以将其作为“multipart/form-data”POST 请求的一部分上传。

在网络上,有很多在视频元素中显示网络摄像头提要并从中捕获单个帧的示例,但没有一个是捕获完整的视频以供上传。网络上没有实际从 Windows Phone 上的网页打开摄像机的示例(我在 Windows 10 Mobile Insider Preview 上使用 Edge 浏览器)。

我还使用了以下代码,它允许您从网络摄像头流中获取静止图像(从MicrosoftEdge/Demos/photocapture获取):

使用 MediaStream 对象调用 initializeVideoStream,但是,似乎无法将其通过管道传输到 Blob 或其他允许您保存它并最终将其发布到服务器的流。

HTML5 MediaRecorder API看起来很有前途,但是,还没有很多供应商实现它。

我还发现了这个 hack Recording Audio & Video with HTML5 (co-starring Meteor),但是,由于 Edge 浏览器不支持webp格式,这是不行的。

我在网上找到的其他一些资源包括(但没有涵盖视频上传):

http://dev.modern.ie/testdrive/demos/photocapture/

http://ryanjoy.com/2014/04/file-upload-in-ie11-on-windows-phone-8-1/

https://blogs.windows.com/buildingapps/2012/11/08/internet-explorer-10-brings-html5-to-windows-phone-8-in-a-big-way/

MSDN 上的 HTML5

MSDN 上的 HTMLInputElement

0 投票
7 回答
8010 浏览

image - Cloudinary、Imgix 等服务的效率

我想建立一个包含大量图像的网站,因此需要像 amazon、ebay、flipkart 等图像处理。有人建议我使用 Cloudinary、Imgix 等服务来调整我的图像大小,因为最好存储每个图像的一个版本,尽管我需要几个不同大小的版本。我想知道这些服务的效率如何。有什么问题吗?我希望我的网站非常快速且响应迅速。我听说过诸如“考虑到您至少将所涉及的传输延迟加倍,这将经常支配完成图像操作所需的时间。

正常:end_user->your_user->end_user

通过这些服务:end_user->your_user->you->your_user->end_user"

0 投票
1 回答
248 浏览

progressive-web-apps - 如何使用 Service Worker 和 srcset 创建离线应用?

我希望我的应用程序(静态网站)使用 Service Worker 离线运行。srcset如果不缓存属性中的所有图像,我看不到这样做的方法。我可以看到客户端提示将如何解决问题,但除了提供请求的文件之外,是否有一个解决方案可以在不涉及服务器做任何事情的情况下工作?

img给定标签中的信息和图像的命名约定,我也许可以看到 Service Worker 如何计算要请求的图像...

有没有人解决过这个问题,或者根本考虑过这个问题?

0 投票
1 回答
186 浏览

html - HTTP 客户端提示的替代方案

我想实现一个解决方案,其中服务器应用程序返回一个图像,该图像大到足以覆盖任何给定方向的整个设备屏幕。

我一直在学习一些关于HTTP Client Hints浏览器发送信息以及请求图像(如屏幕尺寸、像素密度等)的方法。然后服务器可以解析该信息并返回适当大小的图像。

这样我就不必对现有的图像标签进行任何修改,<img src="/myniceimage.jpg" />额外的信息将与请求一起发送。

不幸的是,似乎对此 HTTP 客户端提示功能的支持有限,请参阅http://caniuse.com/#feat=client-hints-dpr-width-viewport

我可以看到此功能的唯一替代方法(因此支持不限于 Chrome)是将图像移动到,data-src以便浏览器不会自动加载它,然后让一些 javascript 函数手动加载图像并沿屏幕发送请求标头中的分辨率和像素密度。


是否有其他方法可以将屏幕尺寸和像素密度发送到服务器,而不需要我将图像链接移动到data-src其中并让 javascript 函数手动加载它们。或者是否有其他方法让服务器使用所有浏览器发送的现有标头以某种方式推断或估计该信息?

谢谢!

0 投票
1 回答
105 浏览

javascript - Javascript 测试客户端以支持 HTTP 客户端提示

是否可以使用 javascript 检测浏览器是否支持 HTTP 客户端提示?现在只有 chrome 似乎支持它:http ://caniuse.com/#feat=client-hints-dpr-width-viewport

所以我正在考虑使用一些可以进行浏览器和版本检测的 javascript 库,如果浏览器是 chrome 和版本 49 或更高版本,我可以假设该功能得到支持。

我只是认为这个解决方案不是非常有效或智能,因为 HTTP 客户端提示的功能很可能在未来被添加到更多浏览器中,然后我必须不断更新我的功能以反映这一点。

是否有一些简单的方法来测试给定的浏览器是否支持带有客户端 javascript 的 HTTP 客户端提示?

谢谢!

0 投票
4 回答
92 浏览

css - CSS如何调整图像大小?

假设我有一个 1240x720 的图像,我使用 CSS 将其大小调整为 1240x250heightwidth. 我访问我的网站并且必须下载它,但是,我是下载原始的(1240x720)然后在我的浏览器上调整大小还是已经调整大小的版本(1240x250)?

从谷歌搜索中,我只能找到人们解释如何使用它的帖子,所以这可能是一个非常愚蠢的问题,因为它甚至没有在任何地方提及..

0 投票
6 回答
51372 浏览

reactjs - React 16:警告:预期的服务器 HTML 包含匹配
由于国家

使用 SSR 时出现以下错误

Warning: Expected server HTML to contain a matching <div> in <div>.

问题出在客户端上,在组件安装时检查浏览器宽度,然后设置组件的状态以呈现它的移动版本。

但是服务器默认容器的桌面版本,因为它不知道浏览器的宽度。

我该如何处理这种情况?我可以以某种方式检测服务器上的浏览器宽度并在发送到客户端之前渲染移动容器吗?

编辑:现在我决定在组件安装时渲染容器。这样,服务器端和客户端最初都不会渲染任何内容来阻止此错误。

我仍然愿意接受更好的解决方案