使用媒体查询：为什么iPhone上的字体与桌面相比如此之小？

Question

我第一次使用媒体查询。对div大小和其他样式更改的任何更改都会很有效。但是移动设备上的字体太小了（在iPhone 5s和三星Galaxy 3上测试）。

当我将移动设备上的网站与狭窄的浏览器窗口中的网站进行比较时，字体看起来不像是缩放比例。

示例：

可以查看相关网页Here：

代码示例：

@media only screen and (max-width: 30em) and (orientation: portrait), 
only screen and (max-device-width: 30em) and (orientation: portrait) 
{
    body {
       -webkit-text-size-adjust: 100%; 
       font-size:100%;
    }
    #wrapper { 
       width:100%;
    }
    #horz-menu { 
       width:100%; 
       background-color:#828282; 
       background-image:none;
    }
    #menu-list { 
       float:none; 
       width:100%; 
       padding:18px 5px 5px 0px; 
       margin:0px; 
       font-size:1.3em; 
       text-align:center; 
    }
    #menu-list li { 
       display:inline; 
       border-right:1px solid #ECECEC; 
       padding-right:5px; 
       margin-left:5px
    }
    #topper { 
       display:none;
    }
    .footer-inner { 
       width:100%; 
       margin:0;
    }
    .customize {
       width:100%; 
       text-align:center; 
       border-right:none; 
       border-bottom: 1px solid #6B6B6B; 
       padding-top:15px; 
       float:none;
    }
    .customize img {
       width:100%;
    }
    #customOptions { 
        text-align:center; 
        width:100%;
    }
    #customOptions .acc-custom, 
    #customOptions .acc-custom-last, 
    #customOptions .acc-custom-last-off, 
    #customOptions .acc-custom-off{ 
        width:23%;
    }
    #accessories {
       width:100%; 
       float:none; 
       text-align:center; 
       padding-top:15px;
    }
    .acc-option { 
       float:left; 
       width:49%; 
       text-align:center; 
       font-weight:bold; 
       color:#545454; 
       margin-top:15px; 
       margin-bottom:15px;
    }
}

我还在网站上工作，但我需要让手机上的文字与桌面相同。如果我在移动媒体查询中将其设置得更大，则字体在小型桌面窗口上看起来很大。

为什么移动设备中的字体看起来与桌面上的小窗口中的字体大小相同？