รักษาขนาดตัวอักษร HTML เมื่อการวางแนว iPhone เปลี่ยนจากแนวตั้งเป็นแนวนอน

ฉันมีเว็บแอปพลิเคชันมือถือที่มีรายการที่ไม่ได้เรียงลำดับซึ่งมีหลายรายการที่มีไฮเปอร์ลิงก์ภายในแต่ละ li:

... คำถามของฉันคือฉันจะจัดรูปแบบไฮเปอร์ลิงก์ได้อย่างไรเพื่อที่จะไม่เปลี่ยนขนาดเมื่อดูบน iPhone และการเปลี่ยนจากแนวตั้ง -> เป็นแนวนอน? ตอนนี้ฉันมีขนาดตัวอักษรไฮเปอร์ลิงก์ที่ 14px แต่เมื่อเปลี่ยนเป็นแนวนอนมันจะขยายเป็น 20px ฉันต้องการให้ขนาดตัวอักษรคงเดิม นี่คือรหัส:

ul li a
{
  font-size:14px;
  text-decoration: none;
  color: #cc9999;
}

<ul>
  <li id="home" class="active">
    <a href="home.html">HOME</a>
  </li>
  <li id="home" class="active">
    <a href="test.html">TEST</a>
  </li>
</ul>

คุณสามารถปิดการทำงานนี้ผ่าน-webkit-text-size-adjustคุณสมบัติ CSS:

html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

การใช้คุณสมบัตินี้ถูกอธิบายต่อไปในคู่มือเนื้อหาซาฟารีเว็บ

หมายเหตุ: ถ้าคุณใช้

html {
    -webkit-text-size-adjust: none;
}

สิ่งนี้จะปิดใช้งานพฤติกรรมการซูมในเบราว์เซอร์เริ่มต้น ทางออกที่ดีกว่าคือ:

html {
    -webkit-text-size-adjust: 100%;
}

สิ่งนี้จะแก้ไขพฤติกรรมของ iPhone / iPad โดยไม่ต้องเปลี่ยนพฤติกรรมของเดสก์ท็อป

ใช้ -webkit-text-size-adjustment: none; html โดยตรงทำให้ความสามารถในการซูมข้อความในเบราว์เซอร์ webkit ทั้งหมดลดลง คุณควรรวมสิ่งนี้กับข้อความค้นหาสื่อเฉพาะสำหรับ iOS ตัวอย่างเช่น:

@media only screen and (min-device-width : 320px) and (max-device-width : 1024px) {
     html {
        -webkit-text-size-adjust: none;
     }
}

ตามที่ได้กล่าวไว้ก่อนหน้านี้กฎ CSS

 -webkit-text-size-adjust: none

ไม่สามารถใช้งานได้กับอุปกรณ์ที่ทันสมัย

โชคดีที่โซลูชันใหม่มาสำหรับ iOS5 และ iOS6 (todo: แล้ว iOS7 ล่ะ) :

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

คุณยังสามารถเพิ่ม, user-scalable=0เพื่อปิดการซูมด้วยนิ้วมือได้ดังนั้นเว็บไซต์ของคุณจะทำงานเหมือนแอพทั่วไป หากการออกแบบของคุณเบรกเมื่อผู้ใช้ซูมให้ใช้เมตาแท็กนี้แทน:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

คุณสามารถเพิ่มเมตาในส่วนหัวของ HTML:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

คุณสามารถเลือกใช้การรีเซ็ต CSS เช่นnormalize.cssซึ่งรวมถึงกฎเดียวกับที่ Crazygringo แนะนำ:

/**
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

อย่างที่คุณเห็นมันยังรวมถึงกฎเฉพาะของผู้จัดจำหน่ายสำหรับโทรศัพท์ IE

สำหรับข้อมูลที่เป็นปัจจุบันเกี่ยวกับการดำเนินงานในเบราว์เซอร์ที่แตกต่างกันโปรดดูหน้าอ้างอิง MDN

รหัสด้านล่างใช้งานได้สำหรับฉัน

html{-webkit-text-size-adjust: 100%;}

ลองล้างแคชเบราว์เซอร์ของคุณถ้ามันไม่ทำงาน

ณ มีนาคม 2019 ข้อความขนาดปรับมีการสนับสนุนที่เหมาะสมในหมู่เบราว์เซอร์มือถือ

body {
  text-size-adjust: none;
}

ใช้viewportเมตาแท็กไม่มีผลต่อการปรับขนาดตัวอักษรและการตั้งค่าuser-scalable: no ไม่ได้ทำงานใน iOS ซาฟารี

ในกรณีของปัญหานี้ได้รับเพราะผมใช้แอตทริบิวต์ CSS สำหรับแท็กwidth: 100%input type="text"

ผมเปลี่ยนค่าของwidthถึง 60% padding-right:38%และเพิ่ม

input {
    padding-right: 38%;
    width: 60%;
}