ブラウザに表示されるフォントサイズがCSSの設定と異なる

メタタグを使用してCSSを設定したい場合、フォントサイズは30pxですが、タグpにコードを入力すると、font-size Chromeブラウザでは38.317pxになりました。どうしてか言ってくれない？ブラウザに表示されるフォントサイズがCSSの設定と異なる

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no"> 
     <title>Document</title> 
     <style> 
      p{ 
       word-break: break-all; 
       font-size: 30px; 
      } 
     </style> 
    </head> 
    <body> 
     <p>ssssssss</p> 
</body> 
</html>