ด้วยเหตุผลบางประการโหมดจำลองอุปกรณ์ไม่อ่านข้อความค้นหาสื่อของฉัน ทำงานบนไซต์อื่น ๆ รวมถึงไซต์ของฉันเองที่ฉันสร้างด้วย bootstrap แต่มันไม่ทำงานกับการสืบค้นสื่อที่ฉันใช้ตั้งแต่เริ่มต้น (การคลิกปุ่มการสืบค้นสื่อจะเปลี่ยนปุ่มเป็นสีน้ำเงิน แต่ไม่มีการแสดงข้อความค้นหาสื่อ) ไฟล์ทดสอบด้านล่าง นี่เป็นข้อบกพร่องใน Chrome หรือมีบางอย่างที่ฉันต้องเปลี่ยนแปลงในไฟล์หรือไม่
<!DOCTYPE html>
<!--
Media Queries Example 1
Sam Scott, Fall 2014
-->
<html>
<head>
<title>MQ Example 1</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { font-family: sans-serif; }
h1 { color: red; }
h2 { color:blue; }
p { color:green; }
@media (max-width: 768px) and (min-width: 481px) {
h1 { color: green; }
h2 { color:red; }
p { color:blue; }
}
@media (max-width:479px), print {
h1,h2,p { color:black; }
}
@media print {
body { font-family: serif; }
}
</style>
</head>
<body>
<h1>I'm a first level heading</h1>
<p>I'm a paragraph.</p>
<h2>I'm a second level heading</h2>
<p>I'm another paragraph.</p>
</body>
</html>