html - iPhone 上的响应式 View

标签 html css

<分区>


关闭 3 年前

对iphone的responsive view有一些误解

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

在 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

任何人都可以向我解释为什么这些更改/以及为什么它不起作用吗?

谢谢

最佳答案

看来您缺少必需的视口(viewport)元数据。在您的 head 标签中添加以下内容会对您有所帮助。

它在 jsfiddle 中工作,因为他们已经在后台处理了元数据,所以您不必在代码中定义。

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

关于html - iPhone 上的响应式 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57474573/

上一篇:html - 关于减小屏幕尺寸 - 侧边导航栏与主要内容重叠,并在浏览器窗口屏幕的右侧留出空白

下一篇:javascript - 有没有办法使用三个js绘制一个只有边框的盒子?

相关文章:

javascript - 下载语音文件

javascript - 单击鼠标调整图像大小

css - Impress.js Cube - 改变过渡方向

html - 使用 flex 布局时 Chrome 滚动条损坏

javascript - 是否可以在 yii 2 的 View 文件中使用 &lt;script src =""> 链接 JavaScript 文件

javascript - 如何标记选中的元素?

javascript - jQuery:触发淡入函数调用

html - 将页面内容调整为浏览器窗口宽度

jquery - 重新定位网页上的 'absolute' 元素 - CSS

php - 可点击的图像(IMG)但需要鼠标图标来改变它