为什么这些具有相同样式标签的页面产生不同的字体大小?

时间:2019-04-15 06:32:52

标签: php html css css3

我有两个几乎完全相同的网页。实际上,在修改第二个元素中的某些元素之前,我复制了第一个代码并将其保存为第二个。样式标签中的样式完全相同。它们显示的字体大小不同,我还不知道为什么。

在不讨论我应该做的事情的切线(例如使用样式表)或仔细挑选我的代码(除非它实际上回答了问题)的情况下,有人可以解释一下为什么我使用相同的样式得到两种不同的样式样式标签?

P.S。 -我知道我可以摆弄并且让他们两个都具有相同的风格,但是不知道为什么会发生这让我发疯。相信我,如果不是因为我痴迷于了解我不了解的事物,我现在已经让他们看起来一样。

P.S.S。 -根据对this question的回答中的建议,为视口添加元标记对我不起作用。

---详细信息---

options.php ,它是所需的样式,在LG手机上的移动Chrome中看起来像这样...下面的屏幕快照来自Opera(Chrome)DevTools,其中设备工具栏已与Galaxy S5一起打开模拟。 (这些屏幕截图正是我在真实设备LG手机上看到的画面): First desired page

admin.php ,具有明显较小的字体。在这些屏幕截图中很难看到,但顶部的img大小完全相同。另外,请注意,两个屏幕截图的宽度相同: 2nd undesired page

options.php 的代码(php渲染):

$admin_str = "<div class=\"a-div\"><a href=\"admin.php\">Admin Options</a></div>";

$body = "
    <div id=\"hero-img\">
       <img src=\"imgs/logo.png\">
    </div>
    <h1>Hi $esc_fName!</h1>
    <h2 id=\"subheading\">What would you like to do next?</h2>
    <div class=\"a-div\"><a href=\"abcde.php\">Record------</a></div>
    <div class=\"a-div\"><a href=\"fghij.php\">Manage -----</a></div>
    <div class=\"a-div\"><a href=\"manage.php\">Manage my account information</a></div>
    <div class=\"a-div\"><a href=\"klmnop.php\">Add a ----</a></div>
    $admin_str
    <div class=\"a-div\"><a href=\"logout.php\">Log out</a></div>
        ";
    echo <<<_END
        <!DOCTYPE html>
        <html lang="en">
            <head>
                <title>------- Options</title>
                <meta charset='UTF-8'>
                <style>
                    body {                                  
                        font-family: sans-serif;
                        font-size: 100%;
                    }
                    #main-content {
                        width: 75%;
                        margin: 40px auto;
                    }
                    #hero-img {
                        width: 50%;
                        margin: 50px auto;
                    }
                    #subheading {
                        margin-bottom: 50px;
                    }
                    .a-div {
                        display: block;
                        margin-top: 20px;
                    }
                    a {
                        font-size: 21pt;
                        color: #000055;
                        text-decoration: none;
                    }
                    a:hover {
                        color: blue;
                    }
                    a:active {
                        background-color: #333333;
                        color: #E70B81;
                    }
                </style>
            </head>
            <body>
                <div id="main-content">
                    $body
                </div>
            </body>
        </html>
_END;

admin.php 的代码(php也会渲染):

$body = "
    <div id=\"hero-img\">
        <img src=\"imgs/dtlogo.png\">
    </div>
    <h1>Hi $esc_fName!</h1>
    <h2 id=\"subheading\">Administrative Options</h2>
    <div class=\"a-div\"><a href=\"appremails.php\">Add a new approved email</a></div>
    <div class=\"a-div\"><a href=\"options.php\">Back to main options</a></div>
    <div class=\"a-div\"><a href=\"logout.php\">Log out</a></div>
    ";

    echo <<<_END
        <!DOCTYPE html>
        <html lang="en">
            <head>
                <title>Administrative Options</title>
                <meta charset='UTF-8'>
                <style>
                    body {                                  
                        font-family: sans-serif;
                        font-size: 100%;
                    }
                    #main-content {
                        width: 75%;
                        margin: 40px auto;
                    }
                    #hero-img {
                        width: 50%;
                        margin: 50px auto;
                    }
                    #subheading {
                        margin-bottom: 50px;
                    }
                    .a-div {
                        display: block;
                        margin-top: 20px;
                    }
                    a {
                        font-size: 21pt;
                        color: #000055;
                        text-decoration: none;
                    }
                    a:hover {
                        color: blue;
                    }
                    a:active {
                        background-color: #333333;
                        color: #E70B81;
                    }
                </style>
            </head>
            <body>
                <div id="main-content">
                    $body
                </div>
            </body>
        </html>
_END;

更新-根据Donkey Shame的请求,以下是计算出的字体大小:

_______________________________
|______|  1st pg.  |  2nd pg.  |
|______|___________|___________|
|  h1  |  40.133px |   32px    |
|______|___________|___________|
|  h2  |  36.133px |   24px    |
|______|___________|___________|
|  a   |  38.133px |   28px    |
|______|___________|___________|

更新#2 -正如Dejan所建议的那样,我尝试以台式机模式查看这两个站点,即使在移动设备上查看时,即使它们不相同,它们也是相同的。

更新#3 -经过一番修补,在移动设备上查看时,两个页面的样式相同。当然,我从不怀疑自己会这样做,并且它仍然没有回答我有关原始代码的原始问题,但是实际上它可能帮助我将其范围缩小到了一个非常具体的罪魁祸首。这就是我所做的。我从font-size上一并删除了body。然后,我将h1h2都更改为div。我编辑了样式标签以反映那些新的div。然后,将font-size: 5vw(旧的#heading div)设置为h1。我为font-size: 3.022727vw(旧的#subheading div)设置了h2(在后面的3.022727中有更多介绍)。我为font-size: 3.5vw元素设置了a这是再次变得奇怪的地方:如果我将两个样式标签中的3.022727vw都更改为3.022726vw,则第一页几乎没有变化(这应该是预期的),但是第二页会这样做(请注意#subheading也如何更改a标签的字体大小):

admin.php -#subheading { font-size: 3.022727vw; } page2-3.022727vw

admin.php -#subheading { font-size: 3.022726vw; } page2-3.022726vw

2 个答案:

答案 0 :(得分:1)

这似乎是用户代理扩展问题。避免此类问题的解决方案是在<head>部分(viewport meta tag)内添加is it necessary?

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

没有视口标签:

Admin page without viewport meta tag

两个带有视口标签的页面:

Admin page Options page

答案 1 :(得分:0)

我认为问题在于应用100%的正文字体大小。解决问题的方法有两种:将font-size: 100%;替换为font-size: 1rem;或将font-size: 16px;替换为Bootstrap,例如使用font-size: 1rem;

如果这不能帮助打开浏览器的Devtools,请打开一个较小字体的页面,并检查和的字体大小。某些其他样式可能会覆盖它。

<style>
  body {                                  
    font-family: sans-serif;
    font-size: 1rem;
  }