Question

我正在遇到一个我不太了解的问题。我正在通过我的PC上的Chrome和我的Nook平板电脑上的Chrome测试不同的东西。例如，我在Chrome上测试了我的电脑上的字间距，所有内容都按照我想要的方式排列。然而，在我的Nook平板电脑上，它看起来不同，好像间距不够。

如果您想在不同设备上看到它们或查看我上传的图片，可以在www.innerstyles.net/testtest.html查看。

这来自我的电脑以及我希望它看起来如何。电脑形象。

enter image description here

这来自Nook高清平板电脑并不是我想要的。角落形象。

enter image description here

我的HTML显然是基本的，名为#testdiv。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />


<title>Test - testtest</title>  
<link rel="stylesheet" href="css/test.css" />  

</head>
<body>

<div id="testdiv">

test1 test2 test3 test4

</div>


</body>
</html>

我的CSS。

#testdiv {
    width:200px;
    background:#888; 
    color:#fff; 
    text-align:right; 
    word-spacing:3px; 
    font-family:Verdana, Geneva, sans-serif;
}

PC Chrome浏览器的呈现方式与移动Chrome浏览器不同。

所以我的问题是如何解决这个问题，所以通过PC或手机看起来一切都是一样的？我尝试过实现不同的宽度，字体，HTML重置，例如规范化，但似乎没有任何工作。

Answer 1

尝试添加此行，以免在移动浏览器上弄乱字体：

**

-webkit-text-size-adjust：none;

**

HTML / CSS浏览器问题

1 个答案: