时间戳

首页 > 解决方案 > iphone上的响应式视图

html - iphone上的响应式视图

问题描述

对iphone上的响应式视图有一些误解

我将@media 编码如下-> @media only screen and (max-width: 375px) { // css code }

在网站 jsfiddle.net 上，当我将屏幕宽度自定义为 375px 时似乎没问题->

@media only screen 
and (max-width: 375px)

https://jsfiddle.net/Benjamn89/qp5a9o41/30/

但是，当我将文件上传到托管网络时，没有应用编码到 @media 中的 css。正如你在这里看到的：

https://bennytal-test1.000webhostapp.com/test1-html.html

谁能向我解释为什么这些变化/以及为什么它不起作用？

谢谢

标签： htmlcss

解决方案

您似乎缺少必需的视口元数据。在您的头部标签中添加以下内容将对您有所帮助。

它之所以起作用，jsfiddle是因为他们已经在后台处理了元数据，因此您不必在代码中进行定义。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

推荐阅读