PC端页面适配移动端

有时候会在移动端打开PC站的网页，往往页面要么显示会错乱，要么背景图片显示不全，为了可以在移动端也能打开PC站的页面，不说像移动端页面那样自适应，起码可以看起来页面是正常的且整齐有序。

 

一般，我们在页面的head标签中会添加一些mate标签，比如PC站的一条：

<meta name="applicable-device" content="pc">     表示应用设备是PC

再看移动端：

<meta name="applicable-device" content="mobile">    表示应用设备是移动端

那么，

想再手机端打开PC站的页面，如何写呢：

<meta name="applicable-device" content="pc,mobile">   

添加这一条，就可以在手机端打开PC站的完整页面了。

 

--- 背景图片，显示不全，有可能你是这样写的，background: url(../img/bj1.png)no-repeat top center;

解决方案：也是背景图片，但写法不一样：

1. background-image: url(../img/bj1.png);
2. background-repeat: no-repeat;
3. background-position: center;

如此就可以显示全了；

 

--- 也有banner图片显示不全的现象：

解决方案：因为img标签是行内元素，所以需要给img设置成会计元素，并且给img的宽度为100%。即，display:block;width:100%;