[分享]css兼容手机浏览器写法

CSS的兼容性一直是前端开发人员需要关注的重要问题，因为不同浏览器对于CSS样式的支持可能会不同。而在手机浏览器上，CSS的兼容性同样需要开发者重视。通常来说，我们可以使用以下的CSS代码来适配手机浏...

CSS的兼容性一直是前端开发人员需要关注的重要问题，因为不同浏览器对于CSS样式的支持可能会不同。而在手机浏览器上，CSS的兼容性同样需要开发者重视。

通常来说，我们可以使用以下的CSS代码来适配手机浏览器：

 /* 禁止缩放 */
  @-ms-viewport { width: device-width; }
  @viewport { width: device-width; }
  @-moz-viewport { width: device-width; }
  @-o-viewport { width: device-width; }
  @-webkit-viewport { width: device-width; }
  body { margin: 0; padding: 0; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; } 

以上代码中，第一行的代码可以禁止用户缩放页面，防止布局等元素失效。而后面的代码则是设置viewport的宽度为设备的宽度，这样就可以让页面自适应手机屏幕的宽度，避免出现滚动条等问题。

最后一行的代码可以让页面中的文本不受系统缩放大小的影响，确保文本在各种大小的显示器上都能有一个相对一致的表现。

除了上述代码外，当然还有许多其他的CSS技巧可以用来兼容手机浏览器。比如可以使用CSS3的媒体查询（Media Queries）来判断当前页面的浏览环境，不同的环境可以使用不同的样式；或者使用CSS Reset来彻底解决不同浏览器的默认样式问题等等。