我目前正在我的网站上使用JavaScript进行移动设备检测,这样我就可以为移动或桌面用户提供不同的内容.
目前我使用window.devicePixelRatio并screen.width计算用户是否在移动设备上,如下:
var isMobileScreenWidth = ((screen.width / window.devicePixelRatio) < 768)
768px 是我们定义移动或桌面的点,所以767及以下是移动,768及以上是桌面.
这很好用,但我最近遇到了Firefox的一个问题,当Firefox放大和缩小时会改变它window.devicePixelRatio,所以:
zoom = 30%, window.devicePixelRatio = 0.3
zoom = 100%, window.devicePixelRatio = 1.0
zoom = 300%, window.devicePixelRatio = 3.0
现在这给我带来了一个问题,因为任何浏览器放大Firefox浏览器的用户都会获得该网站的移动版本.
我想知道是否有人知道一种不同的或更好的方法来获得与桌面浏览器分开的像素密度.
我也使用少量的用户代理检测但是因为跟上不断变化的移动用户代理列表是一项巨大的工作,所以我不可能同时依赖于屏幕分辨率和用户代理时间.
如果有人对此有任何想法,可以帮助那将是非常棒的.
更新:
我刚碰到过这个:
window.screen.availWidth / document.documentElement.clientWidth
这篇文章建议使用这一快速数学:
window.devicePixelRatio在IE 10 Mobile中不起作用？
我测试了它并且它在Firefox中工作,并解决了我的问题,但遗憾的是现在导致Chrome出现问题,因此:
Chrome zoom = 100%,
window.devicePixelRatio = 1.0,
window.screen.availWidth / document.documentElement.clientWidth = 3.0
我似乎无法找到适合一切的可靠解决方案.
我有一个最初为iPhone 6 symulator编写的应用程序,其中有一个组件,其中包含以下示例值:
const styles = StyleSheet.create({
headerNav: {
width: 40,
height: 40
},
headerLogoImage: {
width: 140,
height: 140
},
footerNavText: {
padding: 15,
fontSize: 25
}
});
不幸的是,当我在iPad symulator上启动应用程序时,大小比例完全崩溃.我知道像PixelRation这样的东西,但文档非常有限且不清楚.
任何想法/建议如何使用此PixelRatio类将这些宽度/高度/填充和fontSize转换为正确的值？
我制作了一个响应式网站，可以在不同的屏幕分辨率下正常工作。我使用三种不同的媒体查询 - 从 0 到 640，从 640 到 960 及更高。无论如何，如果我尝试在使用 720x1280 的三星 Galaxy Note2 上打开，因为它的像素比为 2，它将网站读取为 360x640 设备，但具有 640-960 样式。
如何确定网站将以原始分辨率显示？
我将其包含在标题中：
<meta name="viewport" content="width=720, initial-scale=1, maximum-scale=1, user-scalable=no" />
如果我在我的样式表文件中添加这样的东西
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
@viewport {
max-zoom:50%;
width:720px;
}
}
它在 Chrome 的仿真模式下工作正常，但如果我在真正的手机上测试它就不行。
编辑：呜呼......我找到了一种用 JavaScript 做到这一点的方法。
document.querySelector("meta[name=viewport]").setAttribute('content', 'width=device-width, initial-scale='+(1/window.devicePixelRatio)+', maximum-scale=1.0, user-scalable=0');
它读取设备像素比，然后设置initial-scale值。
我正在重新设计我的网站，并决定尝试响应式布局。我是 CSS3 媒体查询的新手，不知道如何使网站在我的智能手机上按预期运行。
该页面当前具有以下视口元标记：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
我不确定它的作用，因为我看不出在 HTML 中包含和不包含它有什么区别，但有人告诉我它在某种程度上很有用。
样式表的目标宽度应为 R < 640px、640px <= R < 960px 和 960px <= R。布局的宽度将分别为 320px、640px 和 960px。
我面临的问题是我的智能手机（可能还有所有现代高像素密度手持设备）。我的智能手机的物理分辨率为 480x800px，但在横向模式下，报告的宽度为 533px（其像素比为 1.5，800/1.5 = 533.33，所以我猜这是预期值）。由于 533 < 640，显示的布局是最窄的：320px。我知道中号在智能手机上看起来不错，并且更喜欢使用它。我应该怎样做才能使智能手机在横向模式下显示 640 像素布局，而不违反适用于桌面浏览器的 1:1 像素比的当前规则？
每个布局的当前媒体查询（分别为 320、640、960）为：
@media only screen and (max-width: 639px)
@media only screen and (min-width: 640px) and (max-width: 959px)
@media only screen and (min-width: 960px)
对于网站上的每个帖子,都会有一个标题图片.此图像的宽度100vw和高度均为300px.我想通过标签的srcset属性img或完整的picture元素提供此图像的多个版本(此时不确定是哪个,因此这个问题).
使用该srcset属性这样做会很容易:
<img srcset="lg.jpg 1200w, md.jpg 992w, sm.jpg 768w, xs.jpg 320w" sizes="100vw" src="xs.jpg">
当我想考虑不同的设备像素比率时出现问题.首先,假设我2x和3x所有列出的图像的版本srcset上面.
假设我有一个2x带有全320px视口的手机(例如iPhone 5).我想要加载浏览器xs_2x.jpg.同样,假设我有1x一个带宽屏显示器的桌面.我想要加载浏览器lg.jpg.
但现在,让我们说我有一个更大的手机,一用一3x,414px-宽视(即iPhone 6加).在这种情况下,我希望我的浏览器加载sm_3x.jpg.但是,我的浏览器可能会加载,sm_2x.jpg因为sm_2x.jpg(1536像素)的宽度更接近手机的宽度(1242像素)而不是宽度sm_3x.jpg(2304像素).这将导致设备上的图像不300px高,从而破坏了网站的要求.
如何实现动态宽度,静态高度,DPR意识的响应图像？
给定一个包含带1px边框的元素的简单页面(下面的源代码),与iOS相比,它将在Android上呈现如下:
http://f.cl.ly/items/0h2Y0v0u1v1L120m0X0s/Untitled-2.png
如您所见,Android边框的宽度不均匀,有时为1px,有时为2px宽.至于我已经能够测试它,这只发生在CSS像素比率为1.5的设备上(包括Android模拟器),而不是像素比率为2(包括iOS).我相信这个问题是由亚像素抗锯齿和/或舍入问题引起的,但我老实说我不知道如何解决这个问题.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style type="text/css">
div {
width: 100px;
text-align: center;
margin-left: 50%;
border: 1px solid magenta;
}
</style>
</head>
<body>
<div>Foobar</div>
</body>
</html>
假设我将默认字体大小设置为16px(这应该是多余的,因为它在大多数浏览器中是默认的):
为简洁起见,我的网站包含一些尺寸为10em x 10em的盒子.
body, html
{
font-size: 16px;
}
.box {
border: 1px green solid;
background-color:green;
width:10em;
height:10em;
}
我的网站已min-width针对针对em值(36,62和85em)的特定断点的媒体查询做出响应.
我的网站唯一做的就是改变盒子的宽度和颜色.
@media (min-width:36em) {
.box {
width: 36em;
border:1px red solid;
background-color:red;
}
}
@media (min-width:62em) {
.box {
width: 62em;
border:1px blue solid;
background-color:blue;
}
}
@media (min-width:85em) {
.box {
width: 85em;
border:1px orange solid;
background-color:orange;
}
}
现在让我们说我有一些分辨率为1440x900的设备,其中浏览器默认情况下设备的像素密度为2dppx.结果,一切看起来都比应有的大.我不喜欢它.
但解决方案应该很简单,对吧？只需在开始时为2dppx像素密度添加媒体查询,因为它是像素的两倍,我只是将字体大小减半...这应该有效,对吧？
因为我在所有东西上使用"em"然后通过将字体大小改为一半来自动减少所有"em"大小的大小......对吧？
@media ( min-resolution: 2dppx) {
body, html {
font-size: 50%;
}
}
好吧,我发现它不起作用,因为我认为它...我试图谷歌的答案,但没有找到任何相关的,我怀疑我误解了字体大小,ems和像素密度的工作原理... …
我一直在尝试将 HTML5 画布转换为低质量的 dataUrl，因为我必须通过服务器传输 dataURL 文件，但我是否这样做
dataURL = document.getElementById('canvas').toDataURL("image/png", 1);
或者
dataURL = document.getElementById('canvas').toDataURL("image/png", 0.00001);
质量没有改变，字符串长度保持不变，当我在两种情况下下载回该图像时，其质量相同，知道我做错了什么吗？
这是一个示例，但我正在做的画布具有更好的像素比，并且非常详细
dataURL = document.getElementById('canvas').toDataURL("image/png", 1);
dataURL = document.getElementById('canvas').toDataURL("image/png", 0.00001);
pixel-ratio ×8
css ×3
javascript ×2
mobile ×2
android ×1
canvas ×1
html ×1
html5 ×1
png ×1
react-native ×1
resolution ×1
smartphone ×1
todataurl ×1