为了更好地描述我的视力困难，我做了一个网页：
https://marknahabedian.github.io/VisionTests/words-test.html
它以逐渐变小的字体大小显示一系列随机选择的单词。
你可以选择一个浅色或深色的主题，并从几个字体和笔画粗细中选择，看看是否有帮助。
我使用HTML style属性和绝对pt单位来控制文本大小。
当我在一个像智能手机一样的小显示器上看这个页面时，文本已经被赋予了绝对大小的点是比我的笔记本电脑上小得多，那里的36 pt文本是半英寸高。我不明白为什么在小显示器上不尊重绝对尺寸。
我把text-size-adjust: none和它的浏览器特定的变体包括在我的风格规则中，但仍然在我的手机上，36 pt的文本只有1/4英寸高。
代码在GitHub上：https://github.com/MarkNahabedian/VisionTests
示例（无动态单词列表）：
WORD_LIST = ["cat", "dog", "tac", "god", "act"];
// Size in points (CSS pt):
TEXT_SIZES = [
36,
30,
24,
16,
14,
12,
10,
8,
6,
];
WORDS_PER_SIZE = 20;
window.addEventListener(
"DOMContentLoaded",
(event) => {
add_control_change_handlers();
//load_word_list("2000_words.txt").then(initialize_words, console.log);
initialize_words(WORD_LIST);
select_theme();
update_text();
});
function add_control_change_handlers() {
document.querySelector("#theme").addEventListener("change", select_theme);
document.querySelector("#font-family").addEventListener("change", select_font_family);
document.querySelector("#font-weight").addEventListener("change", select_font_weight);
}
function select_theme(event) {
// Change class attribute of body element
let body = document.querySelector("html > body");
body.setAttribute("class",
document.querySelector("#theme").value);
}
function select_font_family(event) {
update_text();
}
function select_font_weight(event) {
update_text();
}
function update_text() {
// Update the style attribute of the #text element based on the
// falues of the selected font family and weight.
let text = document.getElementById("text");
let family = document.querySelector("#font-family").value;
let weignt = document.querySelector("#font-weight").value;
text.setAttribute("style",
"font-family: " + family + "; " +
"font-weight: " + weignt + ";");
}
// Size in points (CSS pt):
TEXT_SIZES = [ 36, 30, 24, 16, 14, 12, 10, 8, 6 ];
WORDS_PER_SIZE = 20;
// Using pt, text on my cell phone is half as high as expected -- 36pt
// is only 1/4" high.
// Using px, as sugfgested in
// https://stackoverflow.com/questions/76496769/absolute-css-text-sizes-not-respected-for-small-displays-even-with-text-size-ad
// doesn't seem to fix the problem though.
function pt2px(pt) {
return 96 * pt / 72;
}
function initialize_words(word_list) {
let wordcount = word_list.length;
text_elt = document.getElementById("text");
for (let j = 0; j < TEXT_SIZES.length; j++) {
let size_elt = document.createElementNS(text_elt.namespaceURI, "p");
size_elt.setAttribute("style",
"font-size: " +
TEXT_SIZES[j] + "px;");
size_elt.appendChild(document.createTextNode("" + TEXT_SIZES[j] + " "));
for (let i = 0; i < WORDS_PER_SIZE; i++) {
let word = word_list[Math.floor(Math.random() * wordcount)];
let textnode = document.createTextNode(word + " ");
size_elt.appendChild(textnode);
}
text_elt.appendChild(size_elt);
}
}.controls
{
display: block;
font-size: large;
}
(html,body) *
{
text-size-adjust: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
}
body
{
width: 90%;
}
.text
{
display: block;
width: 100%;
}
.theme-dark
{
background-color: black;
color: white;
}
.theme-light
{
background-color: white;
color: black;
}<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>Vision Word Reading Test</title>
</head>
<body>
<h1>Vision Word Reading Test</h1>
<div class="controls">
<table>
<tr>
<td>
<label for="theme">theme</label>
</td>
<td>
<select id="theme">
<option value="theme-dark">dark</option>
<option value="theme-light">light</option>
</select>
</td>
</tr>
<td>
<label for="font-family">font family</label>
</td>
<td>
<select id="font-family">
<option value="monospace">monospace</option>
<option value="ui-monospace">ui-monospace</option>
<option value="sans-serif">sans-serif</option>
<option value="ui-sans-serif">ui-sans-serif</option>
<option value="serif">serif</option>
<option value="ui-serif">ui-serif</option>
<option value="system-ui">system-ui</option>
</select>
</td>
<tr>
<td>
<label for="font-weight">font weight</label>
</td>
<td>
<select id="font-weight">
<option value="normal">normal</option>
<option value="bolder">bolder</option>
<option value="lighter">lighter</option>
</select>
</td>
</tr>
</table>
</div>
<div id="text" class="text">
</div>
</body>
</html>我欢迎你的建议。
谢谢
2条答案
按热度按时间yqhsw0fo1#
正如注解中所解释的，当在像素屏幕上显示内容时，您应该使用像素大小。如果您希望文本在每个设备上都是相同的大小，则必须将像素值乘以分辨率。这适用于Apple上的Retina分辨率或其他设备上的HD分辨率，或例如4K。我在这里建立了一个例子。
你永远不可能做到完美，因为不同设备上的像素大小不同。但在我看来，这是解决你的问题的最好办法。
编辑：我刚刚在我的MacBook上看到我忘了一些东西。只有当设备具有小像素时，如具有高分辨率的智能手机，您才应该将像素大小乘以dpi。你还得在这段代码里做这个。我也要看看能不能找到解决办法。
czq61nw12#
视口的实现将因设备/制造商而异。最好坚持使用标准大小调整，以实现对视口的最佳支持。