Iphone 移动CSS赢得'；t显示_Iphone_Css_Mobile

Iphone 移动CSS赢得'；t显示

iphone css mobile

Iphone 移动CSS赢得'；t显示,iphone,css,mobile,Iphone,Css,Mobile,我试图教自己如何制作一个网站的移动版本，所以我从一些基本的东西开始我有以下代码 <body> You are using... <p class="mobile"> Mobile </p> <p class="desktop"> Desktop </p> </body> 基本上，我希望根据您使用的设备显示“移动”或“桌面”。当我在我的桌面上导航到这个站点时，它会显示“桌面”，所以看起来不错。但当我在iPhone上

我试图教自己如何制作一个网站的移动版本，所以我从一些基本的东西开始

我有以下代码

<body> 
You are using...
<p class="mobile">
Mobile
</p>

<p class="desktop">
Desktop
</p> 
</body>

基本上，我希望根据您使用的设备显示“移动”或“桌面”。当我在我的桌面上导航到这个站点时，它会显示“桌面”，所以看起来不错。但当我在iPhone上这样做时，它仍然显示桌面

我尝试将最大宽度增加到640px，这是iPhone4S的分辨率。但我还是没有运气。我做错了什么？

iOS设备上的默认视口大约为1000像素。您可能会注意到，当您打开测试页面时，它看起来不像是一个320px宽的页面，而是被放大了

您需要在页面

head

中设置视口

meta

标记，用于将视口宽度设置为设备的宽度：

<meta name="viewport" content="width=device-width">

一旦就位，您会发现@media查询工作得很好（尽管您需要

p.mobile{display:block；}

位来显示“mobile”文本）。

iOS设备上的默认视口大约是1000像素左右。您可能会注意到，当您打开测试页面时，它看起来不像是一个320px宽的页面，而是被放大了

您需要在页面

head

中设置视口

meta

标记，用于将视口宽度设置为设备的宽度：

<meta name="viewport" content="width=device-width">

一旦就位，您会发现@media查询工作得很好（尽管您需要

p.mobile{display:block；}

位来显示“mobile”文本）。

我不认为这就是移动设备和桌面设备之间的区别。你试过不同的样式表吗？例如？@Jessedc呃，媒体查询正是您区分移动设备和桌面设备的方式。谢谢您的回复。不，我没有，因为我读到移动浏览器太高级了，不能识别自己（因此，不要响应）“掌上”标签。我还读到这是一种方法。我认为这不是区分移动设备和桌面设备的方式。你试过不同的样式表吗？例如？@Jessedc呃，媒体查询正是您区分移动设备和桌面设备的方式。谢谢您的回复。不，我没有，因为我读到移动浏览器太高级了，不能识别自己（因此，不要响应）“掌上”标签。我还读到这是一种方法。