在网页的一部分中模拟移动分辨率 [英] Simulating mobile resolution in a section of a webpage
问题描述
我有一个网站，该网站将主要用于台式机上的大屏幕显示器.在页面中，我将有多个内容部分，但我也希望在div中有一个移动应用程序区域，该区域将向用户显示移动应用程序中的项目在不同手机上的外观可能会不同.查看一些手机的规格，我会看到:
I have a website that will mainly be used for large screen monitors on the desktop. Within the page I will have various content sections, but I also want to have a mobile app area within a div that will display to the user how items in a mobile app might look differently on different mobile phones. Looking at specs of some phones I see:
- iPhone 7(4.7英寸)-1,334 x 750像素(326 ppi)
- iPhone 7(5.5英寸)-1,920 x 1080像素(401 ppi)
- 三星Galaxy S7-2,560 x 1440像素(577 ppi)
很明显，台式机显示器上的ppi与移动电话上的ppi不同.
Obviously, the ppi is different on a desktop display than for a mobile phone.
模拟事物在手机上的外观和位置的最佳方法是什么?会只是采用长度和高度的相对比例而忽略ppi的工作吗?
What would be the best way to simulate how things would look and be positioned on a mobile phone? Would just taking the relative ratio of length and height and ignoring the ppi work?
注意
我熟悉Chrome开发者工具.这不是我要的.移动应用部分应位于页面上的div中.它不应该占用我的整个页面并使它看起来像一个移动应用程序.
I am familiar with Chrome Developer Tools. This is not what I am asking for. The mobile app section should be in a div on the page. It should not be taking my entire page and making that look like a mobile app.
它还需要对用户透明，以便他们不必弄清楚如何使用开发人员工具.
It also needs to be something transparent to the user so they do not have to figure out how to use a developer tool.
推荐答案
您不能以任何一种网络语言(HTML/CSS/JS)设置DPI设置.
但是对于模拟，您可以将代码放入iframe甚至div中
然后将您的网站加载到iframe中，然后可以使用 CSS transform:scale()来缩放整个页面，具体取决于手机的PPI.
You cannot set the DPI settings in any of the web languages (HTML/CSS/JS).
But as for simulation, you can put the code in an iframe or even a div
then load your website inside the iframe and then you can use the CSS transform:scale() to scale the whole page depend on your mobile phone's PPI .
当您请参阅例如， iPhone6s 具有750 x 1334 本机分辨率(像素)，但是具有375 x 667 UIKit大小(点)和本机比例因子为2.0 .您可以
As you see for example iPhone6s has 750 x 1334 Native Resolution (Pixels) but 375 x 667 UIKit Size (Points) and the Native Scale factor of 2.0. You can see in CSS Media Queries too, it renders at 375 x 667 and then scales it with native factor (here 2.0) to fit to device display (it causes a soft anti-aliased like effect to happen in between this operation).
现在，在我的iMac 27"2012中，使用108.79/326的量表.因此，我们将对transform:scale应用的最终比例因子是:
And now to simulate screen with 326 ppi for iPhone6s in my iMac 27" 2012 with apparently 108.79 ppi (normally can be 96), I have another scale with factor of 108.79/326. So the final scale factor that we would apply with transform:scale is:
with iframe of 375 x 667 pixels size
108.79/326 * 2.0 = 0.667 : as scale factor
如此:
.iPhone6S {
/* this is the render are dimension */
/* media queries look up to this */
width:375px;
height:667px;
transform-origin: 0 0;
transform:scale(0.67);
/* you can calculate it by something like :
108/326*2 = 0.663 => 0.67*/
/* zoom:...; */ /* This is non-standard feature */
/* FireFox and Opera don't support it */
}
<iframe src="https://www.w3schools.com/" class="iPhone6S"></iframe>
也来自 w3.org的定向
当高度"媒体功能的值大于或等于宽度"媒体功能的值时，方向"媒体功能为纵向".否则，方向"就是风景".
The ‘orientation’ media feature is ‘portrait’ when the value of the ‘height’ media feature is greater than or equal to the value of the ‘width’ media feature. Otherwise ‘orientation’ is ‘landscape’.
If this is a general simulator we are talking about, then you should consider user-agent device detection, that still may some sites rely on it either in server or client side. So then you'll need to fetch the page manually using XMLHTTPRequest and then set user-agent with XMLHTTPRequest.setRequestHeader to some sort of device phone look alike
此处一个示例iPhone6s用户代理字符串:
Here an example iPhone6s user-agent string :
Mozilla/5.0(iPhone； CPU iPhone OS 6_1_3，例如Mac OS X) AppleWebKit/536.26(KHTML，如Gecko)版本/6.0 Mobile/10B329 Safari/8536.25
Mozilla/5.0 (iPhone; CPU iPhone OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10B329 Safari/8536.25
我还碰到了这个站点，值得一提: https://www.mydevice.io/
Also I came across this site that really worth to mention : https://www.mydevice.io/
这篇关于在网页的一部分中模拟移动分辨率的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
