目標的高密度與CSS媒體手機屏幕查詢

Question

目前我使用這個媒體查詢針對手機屏幕：在HTML

@media only screen and (max-width: 767px) {} 

有了這個meta標籤：

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

它的工作原理在大多數設備上都可以使用，比如iPhone，但是在使用高密度設備（如Samsung S6-7等）訪問該網站時，它可以提供桌面版本，並具有超小界面。如果我將其更改爲：

@media only screen and (-webkit-min-device-pixel-ratio: 1.3), 
    only screen and (-o-min-device-pixel-ratio: 13/10), 
    only screen and (min-resolution: 120dpi) {} 

它解決佈局問題，框，容器等看起來相同，但UI仍然超級小。

無論實際的硬件像素密度如何，我可以讓所有移動設備（縱向模式）的網站看起來都一樣？

Answer 1

它現在工作的S7與此設置：

@media only screen and (-webkit-min-device-pixel-ratio: 4), 
     only screen and (-webkit-device-pixel-ratio : 4), 
     only screen and (device-width: 360px), 
     only screen and (device-width: 640px), 
     only screen and (orientation: portrait) 

但它也可以在iPhone 6，有2個設備像素比...

我不不知道它爲什麼工作。