在Chrome上模拟iPhone X
在Chrome上模拟iPhone X
提问于 2017-11-29 12:14:16
我需要模仿Chrome上的iPhone X。我发现了以下信息：
Height: 5.65 inches (143.6 mm)
Width: 2.79 inches (70.9 mm)你能告诉我应该给以下表格哪些值吗？
这就是设备像素比(DPR)
如果要从非Retina机器模拟Retina设备，则调整设备像素比。设备像素比(DPR)是逻辑像素和物理像素之间的比值。带有Retina显示器的设备，如Nexus6P，比标准设备具有更高的像素密度，这会影响视觉内容的清晰度和大小。
回答 3
Stack Overflow用户
回答已采纳
发布于 2017-11-29 12:27:20
根据iPhone X人机界面指南，您应该输入：
- 375用于宽度
- 812表示身高
- 3用于设备像素比
由于比例因子为3，您应该将的物理分辨率(1125××2436×)除以3，以获得逻辑分辨率。
对于用户代理字符串，请查看这个答案。
Stack Overflow用户
发布于 2017-11-29 13:15:43
若要计算设备像素分辨率，请根据提供的链接使用PPI值为458 PPI。
据这个答案称，
458/150 = 3 DPR
要计算高度和宽度，
使用给定的物理分辨率:2436x1125像素分辨率。
- 2436/3 = 812 (高度)
- 1125/3 = 375 (宽度)
这是逻辑像素分辨率。
Stack Overflow用户
发布于 2018-06-19 09:41:38
第一个图像应该保存在img目录中，保存为iphonex.png，或者更改以img.src开头的代码，第二个图像是结果的屏幕截图。
Javascript函数将动态添加iphone凹槽。第一行中的iPhoneX()；应该在加载DOM内容之后运行。
iPhoneX();
window.onresize = window.onorientationchange = function() {
//Your other functions
setTimeout(iPhoneX,100);
}
function iPhoneX() {
if (window.innerWidth == 375 && window.innerHeight == 812) {
if (!document.getElementById('iphone_layout')) {
var img = document.createElement('img');
img.id = 'iphone_layout';
img.style.position = 'fixed';
img.style.zIndex = 9999;
img.style.pointerEvents = 'none';
img.src = 'img/iphonex.png'
document.body.insertBefore(img,document.body.children[0]);
}
} else if (document.getElementById('iphone_layout')) {
document.body.removeChild(document.getElementById('iphone_layout'));
}
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47552632
复制相关文章
相似问题
腾讯云开发者
