blocks|key|148629|text|我有同样的问题，并解决了它改变视窗。我也认为问题出在phonegap，但实际上是用于测试的设备具有不同的dpi。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|148630|我的解决方案是将视口上的目标密度the更改为：|148631|<meta+name="viewport"+content="width=device-width,+initial-scale=1.0,+maximum-scale=1.0,+target-densitydpi=medium-dpi,+user-scalable=0"+/>|code-block|syntax|javascript|148632|希望能有所帮助|148633|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I had the same problem and solved it changing the viewport.
I also thought the problem was phonegap, but it really was that the devices used for testing had different dpi.

My solution was to change the target-densitydpi on the viewport to:

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

Hope it helps

blocks|key|366908|text|target-dpi=medium-dpi适用于我们。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|366909|当ee从PhoneGap+2.2升级到3.3时，Scenario就会遇到这个问题。|366910|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

target-densitydpi=medium-dpi Worked for us.

Scenario
Faced this issue when ee upgraded from PhoneGap 2.2 to 3.3.

blocks|key|148685|text|在此处添加此解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|148686|对我来说，一些文本渲染得非常大，而另一些文本的大小恰到好处。问题出在css中对font-size使用rem值。由于某些原因，以font-size为基值的元素(在正文中定义)呈现的大小远远大于它们应该呈现的大小。|148687|修复方法是在整个站点的包装器元素中重新分配rem+font-size的全局值。|148688|(我的.font-size(1.4)只是一个混合渲染:+font-size:+1.4rem；)|148689|所以这就是|148690|html+{
++font-size:+62.5%25;
}

body+{
++.font-size(1.4);
}

h1+{
++.font-size(2.6);
}|code-block|syntax|javascript|148691|可以用这个来修复|148692|html+{
++font-size:+62.5%25;
}

body+{
++.font-size(1.4);
}

.wrapper+{
++.font-size(1.4);
}

h1+{
++.font-size(2.6);
}|148693|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|X|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|Y|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|Z|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|11|8|@]|9|@]|A|$M|N]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

Adding this solution here

For me, some text were rendering really big, others were the correct size.
The problem was with the use of rem values for font-size in the css. For some reason, elements where the font-size was the base value (defined in the body) were rendered way bigger than they should.

The fix was to reassign a global value for the rem font-size in a wrapper element for the entire site.

(my .font-size(1.4) is only a mixin rendering: font-size: 1.4rem; )

So this 

<pre><code>html {
 font-size: 62.5%;
}

body {
 .font-size(1.4);
}

h1 {
 .font-size(2.6);
}
</code></pre>

Can be fixed with this

<pre><code>html {
 font-size: 62.5%;
}

body {
 .font-size(1.4);
}

.wrapper {
 .font-size(1.4);
}

h1 {
 .font-size(2.6);
}
</code></pre>

blocks|key|366958|text|似乎完全删除target-densitydpi会带来最好的结果。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|366959|<meta+name="viewport"+content="user-scalable=no,+initial-scale=1,+maximum-scale=1,+minimum-scale=1,+width=device-width,+height=device-height"+/>|366960|在大多数情况下，这应该足以控制应用程序的外观。|366961|entityMap^0|6|H|0|0|40|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|R|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|K|$]]

It appears that removing the <code>target-densitydpi</code> altogether brings the best results. 

<code>&lt;meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" /&gt;</code>

This should be more than enough to control your app's appearance in most cases.

I recently build an android app using html, css, javascript and running them through phonegap to create the actual app. One of the problems I encountered in one phone is that the text looks too small. Also some images are a little small as well. I added a viewport meta tag but it doesnt seem to work either. Here are the meta tags:

<pre><code> &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
 &lt;meta name="format-detection" content="telephone=no" /&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" /&gt;`
</code></pre>

This is how it looks 
<img src="https://i.stack.imgur.com/QeacM.jpg" alt="This happens in a particular phone(Samsung Galaxy)"> 

This is how its supposed to look: 
<img src="https://i.stack.imgur.com/LRJ9H.jpg" alt="This is how it looks in htc wildfire s">

Phonegap Application text and layout too small

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我最近使用html、css、javascript构建了一个android应用程序，并通过phonegap运行它们来创建实际的应用程序。我在一部手机上遇到的一个问题是，文字看起来太小了。此外，一些图像也有点小。我添加了一个viewport meta标签，但它似乎也不起作用。下面是meta标签： <meta http...

问Phonegap应用程序文本和布局太小
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Phonegap应用程序文本和布局太小EN