CSS中的@viewport標籤在iOS上不起作用

Question

由於各種原因，我無法修改我正在處理的項目的任何HTML。所以我不能設置該屬性：

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

我試圖把這個在我的CSS：

@viewport { 
    width: device-width; 
    zoom: 1; 
} 

但它似乎並沒有工作。在iPhone上測試它仍然會呈現錯誤的斷點。我認爲這個功能還沒有進入瀏覽器呢？

如果在CSS中無法做到，我可以在服務器端標頭中設置它嗎？例如對於IE，我把X-UA-Compatible:IE=Edge,chrome=1放在Apache響應頭中。是否有可能對視口標籤做同樣的事情？

Answer 1

可能是你需要供應商前綴：

@-wekbit-viewport { 
    width: device-width; 
    zoom: 1; 
} 
@-ms-viewport { 
    width: device-width; 
    zoom: 1; 
} 
@-o-viewport { 
    width: device-width; 
    zoom: 1; 
} 
@viewport { 
    width: device-width; 
    zoom: 1; 
} 

注：目前，Firefox和Safari不支持CSS @viewport。

有關更多信息，請參閱MDN Docs。

Using server side technology,

你可以把它添加到您的.htaccess文件是這樣的：

<FilesMatch "\.(htm|html|php)$"> 
    <IfModule mod_headers.c> 
     BrowserMatch MSIE ie 
     Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie 
    </IfModule> 
</FilesMatch>