经过一个上午的努力 终于将我的最后一个网站 steakovercooked.com 手机友好了. 也就是我所有的网站所有的页面都通过 GOOGLE 的手机友好测试 mobile-user-friendly test..
手机友好是搜索引擎排名的一个很重要的因素. GOOGLE会把手机友好的页面排名靠前 相反如果手机不友好的页面在搜索排名中就会稍微靠后一些.
一般来说 WP主题选择了手机友好之后你就不需要担心什么了, 但如果像我一样设计 steakovercooked.com, 自己写CSS 就得重新布局一下. 有以下几个简单的步骤.
清理HTML代码中的CSS
这里主要指的是直接在 HTML元素里写CSS 这样是很不好的 越靠近元素的CSS权重越大 就不容易被修改. 并且这样也是把内容和表现混在一起了.
1 | <div style='color:red'> |
<div style='color:red'>
不要指定具体的宽度
你要知道 最小屏幕的手机大概宽度是300个相素 如果你的任意HTML元素指定了大于 300px 的宽度 就很有可能让页面变得很乱 (水平条会出现 手机显示就不会友好)
以下代码需要放到 head 标签里
1 2 | <meta name=viewport content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name=applicable-device content="pc,mobile"> |
<meta name=viewport content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name=applicable-device content="pc,mobile">
图片和表格
表格是很不适应手机友好的 所以你最好把它换成 div 来布局. 图片宽度需要指定 否则图片大就会超出手机宽度. 指定宽度的时候需要用一个相对比例 如:
1 | img { max-width: 90%; } |
img { max-width: 90%; }
其实很简单 也没有什么复杂的技术.
英文: https://helloacm.com/simple-steps-make-website-mobile-friendly-responsive-design/
强烈推荐
- 英国代购-畅购英伦
- TopCashBack 返现 (英国购物必备, 积少成多, 我2年来一共得了3000多英镑)
- Quidco 返现 (也是很不错的英国返现网站, 返现率高)
- 注册就送10美元, 免费使用2个月的 DigitalOcean 云主机(性价比超高, 每月只需5美元)
- 注册就送10美元, 免费使用4个月的 Vultr 云主机(性价比超高, 每月只需2.5美元)
- 注册就送10美元, 免费使用2个月的 阿里 云主机(性价比超高, 每月只需4.5美元)
- 注册就送20美元, 免费使用4个月的 Linode 云主机(性价比超高, 每月只需5美元) (折扣码: PodCastInit2022)
- PlusNet 英国光纤(超快, 超划算! 用户名 doctorlai)
- 刷了美国运通信用卡一年得到的积分 换了 485英镑
- 注册就送50英镑 – 英国最便宜最划算的电气提供商
- 能把比特币莱特币变现的银行卡! 不需要手续费就可以把虚拟货币法币兑换
微信公众号: 小赖子的英国生活和资讯 JustYYUK