html - 文本在移动设备上的大小调整错误

标签 html css media-queries

我的网站上有一个非常奇怪的问题,想知道你们中是否有人知道如何解决它。问题如下: 在网站 (typez.bplaced.net) 上,我有几个页面看起来像我希望它们在移动设备上显示的页面,例如所有 Leaderboards您可以作为访客访问,登录后可以访问其他几个。 但是出于某种奇怪的原因,当您将“News”和“关于”(无法发布更多链接)与其他页面上的文本进行比较时,文本太大了……它看起来不太好,而且完全不可读。

这是PHP代码:

require_once("./lib/config_data.php");
require_once("./lib/smarty/libs/Smarty.class.php");
include("navbar.php");

$tpl = new Smarty;
$tpl->display("./templates/news_head.tpl");

$directory = "./news/";
$i = 0;

foreach (new DirectoryIterator($directory) as $file) {
if($file->isDot()) continue;
$filename = $file->getFilename();
$myfile = fopen($directory.$filename, "r") or die("Unable to open file!");
$text = fread($myfile,filesize($directory.$filename));
$date = str_replace("-", ".", substr($filename, 0, 10));

$news_array[strtotime($date)]["text"] = $text;
$news_array[strtotime($date)]["date"] = $date;

fclose($myfile);
}

krsort($news_array);

$n = 1;
foreach ($news_array as $news)
{
if($n <= 4)
{
    $tpl->assign("DATE", $news["date"]);
    $tpl->assign("TEXT", $news["text"]);
    $tpl->display("./templates/news_article.tpl");
    $n++;
}
}


$tpl->display("./templates/news_footer.tpl");

我的模板:

<html>
<head>
<title>News</title>
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<link rel="stylesheet" type="text/css" href="./style/main.css">
<link rel="icon" href="./favicon.png">
</head>
<body>
<main>
<h3>News</h3>

--端头

{$DATE}:
<p>{$TEXT}</p>
<br/>

-- 文章结束

</main>
</body
</html>

--结束页脚

我试过使用视口(viewport)标签,但由于网站的其余部分也采用“缩小”风格(因为我无法在普通手机屏幕上显示表格),所以我不不喜欢用它。此外,由于这两个是仅有的两个没有表格的站点,我尝试添加一些“虚拟表格”以查看它是否可以正确缩放文本大小,但也没有成功。 我在这里错过了什么?提前感谢您的帮助

SP

最佳答案

我自己找到了针对我的特定问题的解决方案:

在之前修复样式的尝试中,我使用了

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

标签以使网站的行为可预测...我的问题是“缩小”的外观丢失了,我需要它,因为我在其他页面上有表格需要屏幕非常大(= > 在手机上缩小了)。

当时我没有意识到我可以修改 initial-scale 变量来获得我想要的东西......我最终在我的所有页面上都使用了这个:

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

然后对我的 CSS 进行了一些小的更改,我的网站在移动设备上查看时看起来就像我想要的那样。是的,它不是最漂亮的,但它是一致且可用的。 :)

关于html - 文本在移动设备上的大小调整错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46485044/

相关文章:

html - CSS page-break-before 不适用于表格行

python - 对齐 Bootstrap 'Thumbnail Grid System'

html - 动画切换固定顶部导航栏

html - 创建连接的圈子

html - 使用 MQ 对 HTML/CSS 进行移动/平板电脑优化

css - 笔记本电脑屏幕注册为最大宽度 : 320px and orientation: portrait

javascript - 当用户通过 webkit 取消按钮取消输入时会触发什么事件?

javascript - jQuery 和 css 两步注册来自

html - 使用 CSS 更改文本的外观

html - 有人能弄清楚为什么我的 h1 h2 和按钮在第三张幻灯片上比其他幻灯片低吗?