html兼容手机代码

随着移动互联网市场的不断扩大，越来越多的网站开始注重移动端体验。其中最重要的就是确保网站在各种不同型号的手机上都能够正常显示和使用。为了满足这一需求，开发者们需要对网页代码进行兼容手机的优化。

<Meta name="viewport" content="width=device-width,initial-scale=1">

首先，我们需要在HTML头部加入上述Viewport元标记。该元标记的作用是告诉浏览器文档应该如何渲染。在移动端上，经常需要将页面宽度设定为设备宽度，以免出现缩放过大或过小的问题。

<a href="tel:[phone]">一键拨号：123456789</a>

移动设备可以直接拨打tel:协议中的电话号码，一般用于拨打客服电话、400电话等功能的实现。在a标签中使用这一协议，即可实现一键拨号功能。

@media screen and (max-width:800px){
    .container{
        width:90%;
    }
}

使用@media媒体查询语句，可以根据不同的设备宽度，下发不同的CSS样式。如上例中，当设备宽度小于800像素时，.container类的宽度将被设置为90%。