Question

我正在处理我的第一个PhoneGap项目。我收到了固定宽度设计（640px）。如何判断每个屏幕的显示效果如何。我试图用这样的方法强制： <meta name="viewport" content="user-scalable=no, width=640, initial-scale=1, target-densitydpi=320" /> 但在AVD中它并不好。

Answer 1

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Reference1

Reference2

Answer 2

您不必使用特殊元标记。您可以使用响应式设计，使用百分比px：内容：

<img src="mount-mayon.jpg"  width:320px; margin-left:6px">

使用

<img src="mount-mayon.jpg"  width:50%; margin-left:2rem">

这将在所有屏幕中显示相同的外观。使用具有响应式设计的元：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />

第二个选项是使用媒体标签。这会根据屏幕和其他参数进行更改。

<style>
@media (max-width: 640px) {
.facet_sidebar {
display: none;
}
}
</style>

PhoneGap修复宽度设计

2 个答案: