文字在手機上的大小錯誤

我的網站上有一個很奇怪的問題，並想知道如果你們中的任何人知道如何解決它。問題如下：在網站（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>

--end頭

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

- 結束文章

</main> 
</body 
</html>

- 頁腳

我試過使用視圖端口標記，但由於網站的其他部分也是體育，「縮小」風格（因爲我不能適應表上的正常的手機屏幕）我不喜歡使用它。此外，由於這兩個網站是唯一沒有表格的兩個網站，我嘗試添加一些「虛擬表格」來查看它是否能夠正確縮放文字大小，但在那裏沒有成功。我在這裏錯過了什麼？感謝您的幫助提前

來源

2017-09-29 The SibirianPns

不知道什麼PHP /聰明的角度在這裏，這聽起來更像是一個CSS問題。 – jeroen

只是使用mediaqueries降低'font-size' – DarkBee

我正在使用「@media screen和（max-width：960px）」，但它並不適用於... –

我發現我的具體問題的解決方案自己：

在以前嘗試解決的造型我曾使用

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

標記爲了讓網站行爲可預測...我的問題是，「縮小」看起來已經丟失，我需要這樣做，因爲我有其他網頁上的表格，要求屏幕非常大（=>縮小在移動）。

什麼我不知道當時是我能與初始規模可變鼓搗得到我想要......我結束了這對我的所有網頁：

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

和稍後我的網站上的一些小的更改，我的網站看起來像我想要在移動設備上查看時。是的，它不是那裏最漂亮的，但它是一致的和可用的。 :)

來源

2017-10-06 17:11:41

文字在手機上的大小錯誤

回答

相關問題