Question

我的网站主要用于桌面上的大屏幕显示器。在页面中，我将有各种内容部分，但我还希望在div中有一个移动应用程序区域，该区域将向用户显示移动应用程序中的项目在不同的移动电话上的外观可能有所不同。看看我看到的一些手机的规格：

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工作？

注意

我熟悉Chrome开发者工具。这不是我要求的。移动应用程序部分应位于页面上的div中。它不应该占用我的整个页面，使其看起来像一个移动应用程序。

它还需要对用户透明，这样他们就不必弄清楚如何使用开发人员工具。

Answer 1

您无法使用任何网络语言（HTML / CSS / JS）设置DPI设置。但是对于模拟，您可以将代码放在iframe甚至div中然后在iframe中加载您的网站，然后您可以使用 CSS transform:scale()来扩展整个页面，具体取决于您手机的PPI。

正如您see例如 iPhone6s 具有750 x 1334 原生分辨率（像素）但375 x 667 UIKit尺寸（分数）和原生比例因子2.0 。您也可以see CSS Media Queries，它渲染为375 x 667，然后使用原生因子（此处为2.0）进行缩放，以适应设备显示（它会导致软anti-aliased like effect发生在此操作之间）。

现在，在我的iMac 27＆＃34;中为 iPhone6s 模拟 326 ppi 的屏幕2012年apparently 108.79 ppi （通常可以是96），我有另一个因子为108.79/326的比例。因此，我们将对transform:scale应用的最终比例因子是：

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 on orientation

当“高度”媒体要素的值大于或等于“宽度”媒体要素的值时，“方向”媒体要素为“纵向”。否则'方向'就是'风景'。

如果这是我们讨论的通用模拟器，那么你应该考虑user-agent device detection，某些网站仍然可能在服务器端或客户端依赖它。因此，您需要使用XMLHTTPRequest手动获取页面，然后将XMLHTTPRequest.setRequestHeader的用户代理设置为某种类似设备的手机

Here示例iPhone6s用户代理字符串：

Mozilla / 5.0（iPhone; CPU iPhone OS 6_1_3，如Mac OS X）   AppleWebKit / 536.26（KHTML，与Gecko一样）Version / 6.0 Mobile / 10B329   Safari浏览器/ 8536.25

另外，我发现这个网站非常值得一提： https://www.mydevice.io/

Answer 2

使用以下步骤模拟不同的显示。

1.right单击Chrome并选择检查

2.选择切换设备工具栏

3.选择所需的显示

4.在选择显示后，按＆＃34; Ctrl + F5＆＃34; 进行刷新页面

Answer 3

我只熟悉网络应用，因此答案将集中于此。

与屏幕尺寸相关的应用样式通常取决于：

设备的宽高比。
由于媒体查询中设置的样式属性或通过javascript，设备报告的屏幕宽度/高度。请注意，在移动设备上，通常这不是实际分辨率，而是分辨率除以所谓的“ devicePixelRatio ”。

要从应用程序的角度模拟移动设备，我们可以：

设置容器与特定移动设备的比率。这将移动/调整应用程序的元素，就像调整窗口大小一样，或者就像移动设备的小屏幕一样。
将应用加载到宽度/高度设置为<iframe>的{{1}}元素中，以便iframe的宽度会欺骗媒体查询，并自定义样式对于较小的屏幕将生效。

这将照顾“正确”工作的应用程序，但与典型计算机屏幕上的真实移动设备相比，iframe元素看起来会非常大。

然而，这取决于a的分辨率和物理尺寸电脑屏幕（我们无法知道物理尺寸或dpi 以编程方式，仅猜测或使用户测量）。这意味着我们无法在计算机屏幕上获得“实际大小”的设备，只是一个有根据的猜测。

为了解决“太大”问题，我们不能只调整iframe的大小，因为媒体查询将停止正常工作。因此，我们必须使用css变换将iframe缩放到更合理的大小。然后可以根据不同的计算机屏幕分辨率调整缩放系数。

这个概念在以下jsfiddle中说明： https://codepen.io/Kasparas/pen/mxPOyY

模拟器显示的“App”托管在： https://kasparasanusauskas.github.io/stackoverflow-demos/demo-app-responsive/index.html

“App”有一些固定大小的框和resolution / devicePixelRatio媒体查询，使得屏幕上的背景蓝色大于360px。这说明了不同屏幕中布局和媒体查询的不同之处。

Answer 4

我的理解是，您希望允许用户与您网页的某个部分进行互动。用户可以通过每个设备的按钮来改变部分的宽度和高度。该部分将像响应页面一样响应。

过去，我设置了一个指向同一域上另一个页面的iframe。更改iframe的大小应模拟设备。

Answer 5

您无法使用dpi作为硬件设置。您必须使用视口关系以所需的分辨率％显示它，具体取决于您喜欢的位置： PX或英寸（根据您可以使用javascript读取的实际视口大小计算）。

另一个不错的常用选项是设置一个带有iframe叠加层的手机模型，打印出你想要的内容，这里是一个提取的例子：

＆＃13;

javax.faces.el.EvaluationException: javax.ejb.EJBException
    at javax.faces.component.MethodBindingMethodExpressionAdapter.invoke(MethodBindingMethodExpressionAdapter.java:101)
    at com.sun.faces.application.ActionListenerImpl.processAction(ActionListenerImpl.java:102)
    at javax.faces.component.UICommand.broadcast(UICommand.java:315)
    at javax.faces.component.UIViewRoot.broadcastEvents(UIViewRoot.java:790)
    at javax.faces.component.UIViewRoot.processApplication(UIViewRoot.java:1282)
    at com.sun.faces.lifecycle.InvokeApplicationPhase.execute(InvokeApplicationPhase.java:81)
    at com.sun.faces.lifecycle.Phase.doPhase(Phase.java:101)
    at com.sun.faces.lifecycle.LifecycleImpl.execute(LifecycleImpl.java:198)
    at javax.faces.webapp.FacesServlet.service(FacesServlet.java:658)
    at org.apache.catalina.core.StandardWrapper.service(StandardWrapper.java:1682)
    at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:318)
    at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:160)
    at org.apache.catalina.core.StandardPipeline.doInvoke(StandardPipeline.java:734)
    at org.apache.catalina.core.StandardPipeline.invoke(StandardPipeline.java:673)
    at com.sun.enterprise.web.WebPipeline.invoke(WebPipeline.java:99)
    at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:174)
    at org.apache.catalina.connector.CoyoteAdapter.doService(CoyoteAdapter.java:416)
    at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:283)
    at com.sun.enterprise.v3.services.impl.ContainerMapper$HttpHandlerCallable.call(ContainerMapper.java:459)
    at com.sun.enterprise.v3.services.impl.ContainerMapper.service(ContainerMapper.java:167)
    at org.glassfish.grizzly.http.server.HttpHandler.runService(HttpHandler.java:206)
    at org.glassfish.grizzly.http.server.HttpHandler.doHandle(HttpHandler.java:180)
    at org.glassfish.grizzly.http.server.HttpServerFilter.handleRead(HttpServerFilter.java:235)
    at org.glassfish.grizzly.filterchain.ExecutorResolver$9.execute(ExecutorResolver.java:119)
    at org.glassfish.grizzly.filterchain.DefaultFilterChain.executeFilter(DefaultFilterChain.java:283)
    at org.glassfish.grizzly.filterchain.DefaultFilterChain.executeChainPart(DefaultFilterChain.java:200)
    at org.glassfish.grizzly.filterchain.DefaultFilterChain.execute(DefaultFilterChain.java:132)
    at org.glassfish.grizzly.filterchain.DefaultFilterChain.process(DefaultFilterChain.java:111)
    at org.glassfish.grizzly.ProcessorExecutor.execute(ProcessorExecutor.java:77)
    at org.glassfish.grizzly.nio.transport.TCPNIOTransport.fireIOEvent(TCPNIOTransport.java:536)
    at org.glassfish.grizzly.strategies.AbstractIOStrategy.fireIOEvent(AbstractIOStrategy.java:112)
    at org.glassfish.grizzly.strategies.WorkerThreadIOStrategy.run0(WorkerThreadIOStrategy.java:117)
    at org.glassfish.grizzly.strategies.WorkerThreadIOStrategy.access$100(WorkerThreadIOStrategy.java:56)
    at org.glassfish.grizzly.strategies.WorkerThreadIOStrategy$WorkerThreadRunnable.run(WorkerThreadIOStrategy.java:137)
    at org.glassfish.grizzly.threadpool.AbstractThreadPool$Worker.doWork(AbstractThreadPool.java:591)
    at org.glassfish.grizzly.threadpool.AbstractThreadPool$Worker.run(AbstractThreadPool.java:571)
    at java.lang.Thread.run(Thread.java:748)
Caused by: javax.ejb.EJBException
    at com.sun.ejb.containers.EJBContainerTransactionManager.processSystemException(EJBContainerTransactionManager.java:752)
    at com.sun.ejb.containers.EJBContainerTransactionManager.completeNewTx(EJBContainerTransactionManager.java:702)
    at com.sun.ejb.containers.EJBContainerTransactionManager.postInvokeTx(EJBContainerTransactionManager.java:507)
    at com.sun.ejb.containers.BaseContainer.postInvokeTx(BaseContainer.java:4566)
    at com.sun.ejb.containers.BaseContainer.postInvoke(BaseContainer.java:2074)
    at com.sun.ejb.containers.BaseContainer.postInvoke(BaseContainer.java:2044)
    at com.sun.ejb.containers.EJBLocalObjectInvocationHandler.invoke(EJBLocalObjectInvocationHandler.java:220)
    at com.sun.ejb.containers.EJBLocalObjectInvocationHandlerDelegate.invoke(EJBLocalObjectInvocationHandlerDelegate.java:88)
    at com.sun.proxy.$Proxy391.create(Unknown Source)
    at be.isl.prj.story.dao.__EJB31_Generated__UniverseFacade__Intf____Bean__.create(Unknown Source)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke(Method.java:498)
    at org.jboss.weld.util.reflection.Reflections.invokeAndUnwrap(Reflections.java:434)
    at org.jboss.weld.bean.proxy.EnterpriseBeanProxyMethodHandler.invoke(EnterpriseBeanProxyMethodHandler.java:127)
    at org.jboss.weld.bean.proxy.EnterpriseTargetBeanInstance.invoke(EnterpriseTargetBeanInstance.java:56)
    at org.jboss.weld.bean.proxy.InjectionPointPropagatingEnterpriseTargetBeanInstance.invoke(InjectionPointPropagatingEnterpriseTargetBeanInstance.java:67)
    at org.jboss.weld.bean.proxy.ProxyMethodHandler.invoke(ProxyMethodHandler.java:100)
    at be.isl.prj.story.dao.UniverseFacade$Proxy$_$$_Weld$EnterpriseProxy$.create(Unknown Source)
    at be.usl.prj.story.controller.IndexBean.doTest(IndexBean.java:53)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke(Method.java:498)
    at com.sun.el.parser.AstValue.invoke(AstValue.java:289)
    at com.sun.el.MethodExpressionImpl.invoke(MethodExpressionImpl.java:304)
    at org.jboss.weld.util.el.ForwardingMethodExpression.invoke(ForwardingMethodExpression.java:40)
    at org.jboss.weld.el.WeldMethodExpression.invoke(WeldMethodExpression.java:50)
    at com.sun.faces.facelets.el.TagMethodExpression.invoke(TagMethodExpression.java:105)
    at javax.faces.component.MethodBindingMethodExpressionAdapter.invoke(MethodBindingMethodExpressionAdapter.java:87)
    ... 36 more
Caused by: java.lang.IllegalArgumentException: Object: be.isl.prj.story.entity.Universe@3b28b3d6 is not a known Entity type.
    at org.eclipse.persistence.internal.sessions.UnitOfWorkImpl.registerNewObjectForPersist(UnitOfWorkImpl.java:4226)
    at org.eclipse.persistence.internal.jpa.EntityManagerImpl.persist(EntityManagerImpl.java:507)
    at com.sun.enterprise.container.common.impl.EntityManagerWrapper.persist(EntityManagerWrapper.java:287)
    at be.isl.prj.story.dao.AbstractFacade.create(AbstractFacade.java:25)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke(Method.java:498)
    at org.glassfish.ejb.security.application.EJBSecurityManager.runMethod(EJBSecurityManager.java:1081)
    at org.glassfish.ejb.security.application.EJBSecurityManager.invoke(EJBSecurityManager.java:1153)
    at com.sun.ejb.containers.BaseContainer.invokeBeanMethod(BaseContainer.java:4786)
    at com.sun.ejb.EjbInvocation.invokeBeanMethod(EjbInvocation.java:656)
    at com.sun.ejb.containers.interceptors.AroundInvokeChainImpl.invokeNext(InterceptorManager.java:822)
    at com.sun.ejb.EjbInvocation.proceed(EjbInvocation.java:608)
    at org.jboss.weld.ejb.AbstractEJBRequestScopeActivationInterceptor.aroundInvoke(AbstractEJBRequestScopeActivationInterceptor.java:64)
    at org.jboss.weld.ejb.SessionBeanInterceptor.aroundInvoke(SessionBeanInterceptor.java:52)
    at sun.reflect.GeneratedMethodAccessor545.invoke(Unknown Source)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke(Method.java:498)
    at com.sun.ejb.containers.interceptors.AroundInvokeInterceptor.intercept(InterceptorManager.java:883)
    at com.sun.ejb.containers.interceptors.AroundInvokeChainImpl.invokeNext(InterceptorManager.java:822)
    at com.sun.ejb.EjbInvocation.proceed(EjbInvocation.java:608)
    at com.sun.ejb.containers.interceptors.SystemInterceptorProxy.doCall(SystemInterceptorProxy.java:163)
    at com.sun.ejb.containers.interceptors.SystemInterceptorProxy.aroundInvoke(SystemInterceptorProxy.java:140)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke(Method.java:498)
    at com.sun.ejb.containers.interceptors.AroundInvokeInterceptor.intercept(InterceptorManager.java:883)
    at com.sun.ejb.containers.interceptors.AroundInvokeChainImpl.invokeNext(InterceptorManager.java:822)
    at com.sun.ejb.containers.interceptors.InterceptorManager.intercept(InterceptorManager.java:369)
    at com.sun.ejb.containers.BaseContainer.__intercept(BaseContainer.java:4758)
    at com.sun.ejb.containers.BaseContainer.intercept(BaseContainer.java:4746)
    at com.sun.ejb.containers.EJBLocalObjectInvocationHandler.invoke(EJBLocalObjectInvocationHandler.java:212)
    ... 60 more

＆＃13;

iframe {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #FFF;
    z-index: 5;
}

＆＃13;

最后，你想模拟，并给出一个模型添加一个有价值的沉浸，因为你可以添加响应元素（或固定的元素）来缩放它以适应。模拟移动设备是一个不同的事实，不可行。

Answer 6

过去当我不得不测试这个时，我刚刚在我的CSS中添加了自定义maxwidth / maxheight属性后调整了浏览器的大小。一旦达到这些界限，您的相关CSS就会启动。

在网页的一部分中模拟移动分辨率

6 个答案: