Galaxy S5 上的 Cordova CSS 问题
Cordova CSS issue on Galaxy S5
对于 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
更新
尝试使用@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: 是屏幕或者整个页面,而不只是像文档那样的渲染区域window。
[第一个回答]
我也有这个问题。试试这个:
<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
似乎解决了这个问题。让我知道。
对于您的媒体查询:在最大宽度之后使用最大设备宽度。
参见:
- Mobile orientation change not applying CSS
- What is the difference between max-device-width and max-width for mobile web?
问题在于 Android OS 4.4 Webkit 上的缩放。我通过
调整 App 的初始缩放找到了解决方案
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
感谢支持
对于 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
更新
尝试使用@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: 是屏幕或者整个页面,而不只是像文档那样的渲染区域window。
[第一个回答]
我也有这个问题。试试这个:
<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
似乎解决了这个问题。让我知道。
对于您的媒体查询:在最大宽度之后使用最大设备宽度。 参见:
- Mobile orientation change not applying CSS
- What is the difference between max-device-width and max-width for mobile web?
问题在于 Android OS 4.4 Webkit 上的缩放。我通过
调整 App 的初始缩放找到了解决方案 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
感谢支持