网页响应移动视图

Question

我有一个网站，必须响应手机。我用我的桌面创建了它。

当我调整浏览器窗口时，它运行的很好，但是当我在手机（Microsoft-640）上查看它时，它似乎不响应移动视图。

Answer 1

请你能为响应添加meta标签视作为下：

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

Answer 2

这将有助于使你的网站，通过自己的手机查看。

CSS3中的媒体查询采用了这个想法并对其进行了扩展。他们不是在寻找一种设备，而是寻找设备的功能，并且可以使用它来检查各种事物。

例如：

• 宽度和高度（在浏览器窗口）
• 装置的宽度和高度
• 方向 - 例如在横向或纵向模式电话？
• 分辨率

链接使用介质的单独的样式表查询

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" /> 

使用媒体查询第一种方法是让CSS的替代部分就在您的单一样式表中。因此，要针对小型设备

我们可以使用下面的语法：

@media only screen and (max-device-width: 480px) { 

} 

示例代码：

@media only screen and (max-device-width: 480px) { 
    div#wrapper { 
     width: 400px; 
    } 

    div#header { 
     background-image: url(media-queries-phone.jpg); 
     height: 93px; 
     position: relative; 
    } 

    div#header h1 { 
     font-size: 140%; 
    } 

    #content { 
     float: none; 
     width: 100%; 
    } 

    #navigation { 
     float:none; 
     width: auto; 
    } 
} 

对于一些参考：1 click me please，2 click me too