CSS：增加移動響應中的字體大小隻是改變行間距

Question

我在patife.com創建了一個小型博客應用程序

默認的CSS行爲是移動頁面。我想要有更大的字體（無處不在），以便在移動設備上具有更高的可讀性，並且可以在大型顯示屏上使用更小的字體。但是，無論我在代碼中插入不同的「字體大小：xx rem」，我的iPhone上顯示的字體保持相同大小，只是行間距被壓縮或擴展。

再次，我要的是： - 移動（默認）行爲：字體大小顯示大 - 大屏幕行爲：字體大小顯示正常（1rem）

當前代碼沒有任何字體大小低於

html { 
} 

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 

ul { 
    margin-left:20px; 
} 

ol { 
    margin-left:20px; 
} 

/* Obsessive compulsive behaviour: Nobody touch the borders! */ 
.page { 
    line-height: 1.4rem; 
    margin: 30px 30px 30px 30px; 
} 

/* MAIN STRUCTURE */ 
/* This is an ID because we only use it once and specifically*/ 
#header { 
    width: 100%; 
    z-index: 1; 
    display: inline-block; 
} 

#title { 
    float: left; 
} 

/* inside the header */ 
#meta { 
    float: right; 
} 

/* This is a class because it will be used multiple times (2) */ 
.column { 
    margin-top: 15px; 
    display: inline-block; 
} 

/* first column */ 
#entries { 
    float: left; 
    width: 100%; 
} 

/* second column */ 
#navigation { 
    display: inline-block; 
    float: left; 
    background-color: beige; 
    width: 100%; 
    text-align: left; 
} 

/* ENTRIES */ 
.entry { 
    display: block; 
    margin-bottom: 20px; 
} 

.entry_title{ 
    font-weight: bold; 
} 

.entry_body{ 
} 

.en { 
    float: left; 
    width: 100%; 
    margin-bottom: 10px; 
    margin-right: 0px; 
} 

.pt { 
    float: left; 
    width: 100%; 
    margin-left: 0px; 
    font-style: italic; 
} 

p { 
    margin-top: 1.4rem; 
} 

.entry_category{ 
} 

.entry_footer{ 
    width: 100%; 
    clear: both; 
    color: lightgrey; 
} 

/* FORMS */ 
.form_title{ 
    float: left; 
    width: 100%; 
} 

.form_field{ 
    float: left; 
    width: 100%; 
} 

.form_input_big{ 
    width: 100%; 
    height: 30rem; 
} 

.form_button{ 
    display: block; 
} 
/* TEXT */ 

#title a { 
    color: rgb(38, 38, 38); 
} 

a:link { 
    text-decoration: none; 
} 

a:hover{ 
    text-decoration: underline; 
} 

a:visited{ 
    text-decoration: underline; 
    color: blue; 
} 

.flash{ 
    color: red; 
} 

@media (min-width: 63em) { 
    .en { 
     width: calc(48% - 15px); 
     margin-bottom: 0px; 
     margin-right: calc(15px + 2%); 
    } 

    .pt { 
     width: calc(48% - 15px); 
     margin-left: calc(15px + 2%); 
    } 
} 

Answer 1

所以@AVAVT的評論就是答案。問題在於瀏覽器強制定期進行桌面視圖縮放。

有這兩個答案：

• 一個CSS實現視元的
• 的HTML短期修復由蘋果實現

從http://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972