ข้อความค้นหาสื่อจำลองโหมดอุปกรณ์ Chrome ไม่ทำงาน


94

ด้วยเหตุผลบางประการโหมดจำลองอุปกรณ์ไม่อ่านข้อความค้นหาสื่อของฉัน ทำงานบนไซต์อื่น ๆ รวมถึงไซต์ของฉันเองที่ฉันสร้างด้วย 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>

2
Sam Scott: คำตอบของ @ BananaNeil น่าพอใจกว่าถ้าทำได้ให้ทำเครื่องหมายว่าเขาเป็นคำตอบที่ดีที่สุด
Digger

คำตอบ:


247

ฉันแก้ไขปัญหานี้โดยการเพิ่มเมตาแท็กในเพจของฉัน:

 <meta name="viewport" content="width=device-width">

อัพเดท (ธันวาคม 2019):

ดูเหมือนว่าคุณอาจต้องตั้งค่ามาตราส่วนเริ่มต้นและมาตราส่วนขั้นต่ำดังนี้:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />

7
สิ่งนี้ได้ผลสำหรับฉันเช่นกัน มีความคิดว่าเหตุใดจึงช่วยแก้ปัญหาได้
Richie Thomas

@BananaNeil: แม้แต่ฉันก็อยากรู้ว่าอะไรคือเหตุผลที่อยู่เบื้องหลังวิธีแก้ปัญหานี้? มีความคิด?
dreamweiver

2
ดูเหมือนว่าโปรแกรมจำลองโครเมี่ยมจะพยายามแสดงผลและลดขนาด946pxหน้าเป็นหน้าจอขนาดใดก็ตามที่จำลอง คุณสามารถเห็นได้ว่าสิ่งนี้เป็นจริงโดยตรวจสอบว่าความกว้างของแท็กเนื้อหาของหน้าที่มีปัญหาของคุณอยู่946pxในโปรแกรมจำลองเสมอ แท็กวิวพอร์ตจะบอกเบราว์เซอร์ว่าควรพยายามแสดงผลหน้าเว็บอย่างไร width=device-widthทำหน้าที่ในแบบที่คุณคาดหวังในขณะที่ขยายwidth=100pxทุกอย่าง คุณสามารถอ่านเพิ่มเติมได้ที่นี่: w3schools.com/css/css_rwd_viewport.asp
BananaNeil

2
นอกจากนี้ยังสามารถแสดงพฤติกรรมแปลก ๆ ได้หากคุณมีการซูมมากเกินไป ... คุณจะได้รับมิติที่คุณสามารถป้อนได้เท่านั้น บน Mac หากคุณเปลี่ยน cmd - ในที่สุดรายการจำลองอุปกรณ์เคลื่อนที่จะปรากฏขึ้นอีกครั้งพร้อมกับ Galaxy S5, iPhone 6 และอื่น ๆ ในนั้น ...
JGFMK

1
จำได้ยากว่านี่ไม่ใช่ค่าเริ่มต้น;)
doublejosh

19

คำตอบที่ยอมรับไม่ได้ทำเพื่อฉันฉันต้องเพิ่มminimum-scale=1ด้วย

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />

1
คุณพูดถูกฉันไม่ทราบถึงคุณสมบัติที่เพิ่มนี้
adnan tariq

6

การจำลองอุปกรณ์ใน Chrome ยังคงเป็น WIP พูดตามตรงฉันคิดว่าพวกเขาผลักดันให้ Chrome เร็วเกินไป ลองใช้ Canary (เบราว์เซอร์ Chrome เบต้า) เพื่อทดสอบการจำลองฉันพบว่ามันทำงานได้ดีกว่าใน Chrome


0

ใช้ได้ผลสำหรับฉัน

เพียงแค่ใส่เมตาแท็กวิวพอร์ตในส่วนหัวของเพจของคุณ ดูตัวอย่าง:

 <head>
  <!--include the following meta tag to make chrome dev tools recognize media queries: -->
  <meta name="viewport" content="width=device-width">
</head>


0

ยังคงมีปัญหาเดิมจนกว่าฉันจะสังเกตเห็นว่าหากฉันมีการใช้งานมากกว่าหนึ่งชุดสำหรับกฎชุดเดียวกันขึ้นอยู่กับขนาดหน้าจอ:

ระบุทั้งความกว้างต่ำสุดและสูงสุดสำหรับคิวรีสื่อเดียวกันเพื่อไม่ให้ถูกเขียนทับโดยอันที่ตามมา:

@media screen and (min-width:9px , max-width:9px) {

    css.selector { 

        style rules gets applied : in this range of screen sizes ;

    } 

}


css.selector{


    the other style get applied : starting from 10px ;

}

หรือตั้งค่าเบรกพอยต์อย่างน้อยหนึ่งจุดเป็น

@media screen and (min-width:9px) {

    some styles get applied : starting from this point ;

}

}

@media screen and (min-width:99px) {

    some styles gets applied : starting from this point ;

}

}
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.