Question

我们有一个钛合金的混合应用程序。它的工作正常，除了一些新的手机（例如据我所知的Galaxy s7活动）。在这些手机上，即使我有以下视口元标记

，html页面也会放大

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

我尝试了不同的选择，但似乎没有任何效果。任何帮助将不胜感激。问题是，当webview打开html页面时，页面会被放大。

Answer 1

好的，我想我已经弄明白了这个问题。问题在于像素比率。导致此问题的设备上的像素比率为4.因此，初始比例＆＃34; 1＆＃34;由于屏幕密度高，所以不合适。感谢以下文章，我能够创建一个JavaScript函数，根据屏幕的像素比率调整初始比例。

以下是文章https://coderwall.com/p/ikrswg/bootstrap-3-grid-system-and-hi-density-small-screens-detected-as-xs 非常感谢写这篇文章的人。

以下是您需要在页面标题中添加的元标记

＆＃13;

<!DOCTYPE html>
<html lang="en">	
	<head>
		
		<meta charset="utf-8" />
    	<meta name="description" content="">
        <meta name="HandheldFriendly" content="True">
        <meta name="MobileOptimized" content="320">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0">
        <meta http-equiv="cleartype" content="on">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

＆＃13;

以下是您可以在每个页面调用以调整比例

的JavaScript函数

＆＃13;

function FixScreenScale(){
	if ((window.devicePixelRatio || 1) == 1) return;
	
	var scale = 1 / (window.devicePixelRatio || 1);
	var content = 'width=device-width, initial-scale=' + scale + ', minimum-scale=' + scale + ', maximum-scale=' + scale + ', user-scalable=0';
	document.querySelector('meta[name="viewport"]').setAttribute('content', content);
}

＆＃13;

Titanium hybrid app - html页面在samsum s7中放大了

1 个答案: