ขนาดตัวอักษรบางตัวแสดงผลใหญ่ขึ้นใน Safari (iPhone)

มี CSS หรือเหตุผลอื่น ๆ ที่ Safari / iPhone ละเว้นการตั้งค่าขนาดตัวอักษรหรือไม่? ในเว็บไซต์เฉพาะของฉัน Safari บน iPhone แสดงผลขนาดตัวอักษร: ข้อความ 13px ใหญ่กว่าขนาดตัวอักษร: ข้อความ 15px อาจไม่รองรับขนาดตัวอักษรในบางองค์ประกอบหรือไม่?

คำตอบของ Joe มีแนวทางปฏิบัติที่ดีอยู่บ้าง แต่ฉันคิดว่าปัญหาที่คุณกำลังอธิบายเกี่ยวกับข้อเท็จจริงที่ว่า Mobile Safari จะปรับขนาดข้อความโดยอัตโนมัติหากคิดว่าข้อความจะแสดงผลเล็กเกินไป -webkit-text-size-adjustคุณจะได้รับรอบนี้มีคุณสมบัติแบบ CSS นี่คือตัวอย่างวิธีใช้กับร่างกายของคุณสำหรับ iPhone เท่านั้น:

@media screen and (max-device-width: 480px){
  body{
    -webkit-text-size-adjust: none;
  }
}

ใช้ 100% แทนไม่มี

normalize.cssรวมถึงสิ่งนี้

ตรวจสอบให้แน่ใจว่าคุณตั้งค่าการซูมเริ่มต้นเป็น 1 ในเมตาแท็กวิวพอร์ตของคุณ:

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

ฉันไม่ได้ใช้คำจำกัดความของพิกเซลอีกต่อไปเพราะมันสับสนจริงๆและไม่เหมือนกันทุกประการในบริการภาพ

พบกับหน่วย

1. “ Ems” (em):“ em” เป็นหน่วยที่ปรับขนาดได้ซึ่งใช้ในสื่อเอกสารบนเว็บ em เท่ากับขนาดฟอนต์ปัจจุบันเช่นถ้าขนาดฟอนต์ของเอกสารคือ 12pt 1em จะเท่ากับ 12pt Ems สามารถปรับขนาดได้ตามธรรมชาติดังนั้น 2em จะเท่ากับ 24pt, .5em จะเท่ากับ 6pt เป็นต้น Ems กำลังได้รับความนิยมมากขึ้นในเอกสารเว็บเนื่องจากความสามารถในการปรับขนาดและลักษณะที่เป็นมิตรกับอุปกรณ์เคลื่อนที่
2. พิกเซล (px): พิกเซลเป็นหน่วยขนาดคงที่ที่ใช้ในสื่อบนหน้าจอ (เช่นอ่านบนหน้าจอคอมพิวเตอร์) หนึ่งพิกเซลเท่ากับหนึ่งจุดบนหน้าจอคอมพิวเตอร์ (ส่วนที่เล็กที่สุดของความละเอียดหน้าจอของคุณ) นักออกแบบเว็บไซต์หลายคนใช้หน่วยพิกเซลในเอกสารเว็บเพื่อสร้างการแสดงผลไซต์ของตนที่สมบูรณ์แบบตามพิกเซลตามที่แสดงในเบราว์เซอร์ ปัญหาอย่างหนึ่งของหน่วยพิกเซลคือไม่ได้ปรับขนาดขึ้นสำหรับผู้อ่านที่มีความบกพร่องทางสายตาหรือลดลงเพื่อให้พอดีกับอุปกรณ์เคลื่อนที่
3. คะแนน (pt): คะแนนมักใช้ในสื่อสิ่งพิมพ์ (สิ่งที่จะพิมพ์ลงบนกระดาษ ฯลฯ ) จุดหนึ่งเท่ากับ 1/72 ของนิ้ว จุดต่างๆก็เหมือนกับพิกเซลเนื่องจากเป็นหน่วยขนาดคงที่และไม่สามารถปรับขนาดได้
4. เปอร์เซ็นต์ (%): หน่วยเปอร์เซ็นต์นั้นเหมือนกับหน่วย "em" ประหยัดสำหรับความแตกต่างพื้นฐานบางประการ ก่อนอื่นขนาดฟอนต์ปัจจุบันเท่ากับ 100% (เช่น 12pt = 100%) ในขณะที่ใช้หน่วยเปอร์เซ็นต์ข้อความของคุณยังคงปรับขนาดได้อย่างสมบูรณ์สำหรับอุปกรณ์เคลื่อนที่และสำหรับการเข้าถึง

ฉันมีปัญหาเดียวกันปรากฎใน CSS ดั้งเดิมมีบรรทัดนี้:

-webkit-text-size-adjustment: 120%;

ฉันต้องเปลี่ยนเป็น 100% และทุกอย่างก็ราบรื่น ไม่จำเป็นต้องเปลี่ยน px ทั้งหมดเป็น em หรือ %%

ตรวจสอบด้วยว่าคุณไม่ได้ตั้งค่า "ความกว้าง / ความสูง" ให้กับองค์ประกอบที่คุณกำลังจัดการอยู่หรือไม่ Safari ให้การปรับขนาดความสำคัญเหนือขนาดตัวอักษรใน svg, Chrome และ FF ดูเหมือนว่าอย่างน้อยที่สุด