如何根据设备/屏幕分辨率调整屏幕?

时间:2013-06-26 06:55:34

标签: javascript css3 extjs4 screen extjs4.1

我使用Extjs4.1完成了非常好的工作。客户端他们需要屏幕就像他们访问除电话以外的其他设备中的应用程序URL。所有屏幕都应按照设备安装,没有任何水平/垂直滚动条。 我在head,meta标记的index.html文件中包含了一行代码,如下所示。所以现在应用程序适合ipad而没有任何滚动条。在我的桌面显示器中,屏幕也很合适,但是如果我在笔记本电脑水平/垂直滚动条中浏览,则会显示相同的应用程序URL。如何适应ipad /台式机显示器等笔记本电脑设备中的所有屏幕?我没有使用flex,因为如果它适合小设备,但问题是所有组件将一个在另一个之上合并(重叠),而最小化/最大化也有问题。 任何人都可以告诉我如何解决这个问题吗?非常合适。谢谢

代码就在这里:

<head>      
    <meta name="viewport" content="width=1024">    
</head>

1 个答案:

答案 0 :(得分:0)

在extjs中无法区分笔记本电脑和台式机设备。我走了不同的路。但这不正确的方式。我们可以按要求实现。在视图中全局计算屏幕的高度。如果屏幕分辨率为1600X900(桌面)window.ineerHeight将超过700.如果屏幕分辨率小于1600x900 window.innerHeight将小于700.所以这里计算分配给组件的动态值。它对我来说非常好。干杯

这是我的代码:

if(window.innerHeight>700){ 
    var paddingValue = 10; 
    var imgHeight = window.innerHeight/4.1; //Desktop
}
else{
   var paddingValue = window.innerHeight/35;
   var imgHeight = window.innerHeight/5.7;  //Laptop 
}