Galaxy S5 上的 Cordova CSS 问题答案

【问题标题】：Cordova CSS issue on Galaxy S5Galaxy S5 上的 Cordova CSS 问题
【发布时间】：2015-02-09 12:01:11
【问题描述】：

对于 cordova android 应用程序，我为 1080 x 1920 屏幕分辨率创建了一个 CSS 并使用媒体查询访问

@media screen and (max-width: 680px) and (orientation:portrait) //Galaxy S5 compatible

或

@media screen and (device-height : 1920px) and (device-width : 1080px) and (orientation:portrait) // Galaxy S4 compatible

CSS 在 S4 设备上运行良好，但在与 S4 具有相同屏幕分辨率的 S5 设备上似乎被放大和损坏。

元数据定义为<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />

请建议我需要进行哪些更改才能解决此问题并为 Galaxy S4 和 S5 设备使用相同的 CSS

【问题讨论】：

标签： html css cordova phonegap-plugins android-ui

【解决方案1】：

更新

尝试使用@media screen 和min/max-device-width。

例如：

/* Android Tablet (landscape) style */
@media only screen and (min-device-width : 800px) and (max-device-width : 1280px) and (orientation : landscape) {
}

device-width：是屏幕或整个页面，而不仅仅是作为文档窗口的渲染区域。

[第一个答案]

我也有这个问题。试试这个：

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=medium-dpi" />

target-densitydpi=medium-dpi 似乎解决了这个问题。告诉我。

对于您的媒体查询：在 max-width 之后使用 max-device-width。见：

【讨论】：

试过了，没用。但是我发现了一些其他问题，当我尝试从 S4 设备控制台.log 屏幕高度时，它是 1840 像素高度，但在 S5 中它仅记录 615 像素。这似乎是问题所在？
使用 JavaScript 比较高度：var h = document.body.clientHeight; console.log('身高：' + h);
document.body.clientHeight 是 1845，console.log("height"+height) 是 615
好的，那2个设备有什么区别呢？
对于我们的测试，S4 的操作系统是 4.3，S5 的操作系统是 4.4

【解决方案2】：

问题在于 Android OS 4.4 Webkit 上的缩放。我通过调整 App 的 Initial scaling by 找到了分辨率

 Display display = ((WindowManager) getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay();
 int width = display.getWidth(); 
 int height = display.getHeight(); 

 // calculate target scale (only dealing with portrait orientation)
 double globalScale = Math.ceil( ( width / ORIG_APP_W ) * 100 );

 // set the scale
 this.appView.setInitialScale( (int)globalScale );

如上所述： Scaling fixes for Android devices in Phonegap

感谢支持

【讨论】：