但在桌面浏览器上可以

但在桌面浏览器上可以

本文介绍了响应宽度在手机上太小,但在桌面浏览器上可以的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在做回应式网页设计。从我迄今为止学到的,它围绕一个流体组件的流体网格,和CSS媒体查询。

I am practicing responsive web design. From what I've learned so far, it revolves around a fluid grid with fluid components, and CSS media queries.

网站看起来就像我缩小浏览器时在手机上的样子:

The website looks just like how I want it to look like on a mobile phone when I shrink my browser:

但是,在我的手机上电话,放在我的网络服务器后,看起来完全不同:

However, when on my mobile phone, after being put on my web server, it looks completely different:

我认为发生的宽度和设备宽度之间存在一些冲突。

I think there is some conflict between width and device-width that is occurring. Does anyone know what is going wrong?

这是我如何加载我的样式表:

This is how i load my stylesheets:

<link href="/stylesheets/index.css" rel="stylesheet" type="text/css" />
<link href="/stylesheets/mobile.css" rel="stylesheet" type="text/css" media="screen and (max-width: 600px), screen and (max-device-width: 600px)" />


推荐答案

>

There is not responsive without viewport meta tag

<meta name="viewport" content="width=device-width, user-scalable=no">

有关视口元标记的详情

More about viewport meta tag https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

这篇关于响应宽度在手机上太小,但在桌面浏览器上可以的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-05 16:57