适合于手机访问的网站的代码分析-优快云博客

本文链接：https://blog.youkuaiyun.com/gaze_ldx/article/details/84052328

本文探讨如何针对手机访问优化网站，通过分析网易手机版和新浪微博的代码前部分，总结了页面布局、图片显示和响应式设计的关键点，强调了手机网站与网页网站的微调之处，以及如何实现移动端与桌面端的兼容性。

现在手机上网流行，我打算开发的“我的故事”网站想让他默认是以手机访问。

学习了一下网易手机版：3g.163.com

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="application/vnd.wap.xhtml+xml;charset=UTF-8"/> 
<meta http-equiv="Cache-Control" content="no-cache"/> 
<meta http-equiv="refresh" content="300; url=/"/> 
<title>网易首页_手机网易网</title> 
<meta name="viewport" content="width=device-width; initial-scale=1.4; minimum-scale=1.0; maximum-scale=2.0"/> 
<meta name="MobileOptimized" content="240"/>

还有新浪微博：weibo.cn

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta http-equiv="Cache-Control" content="no-cache"/>

<meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=2.0"/>

<meta name="MobileOptimized" content="240"/>

体会：

* 看来手机网站和web只要略微修改一下代码的前部分就好了，还有页面布局他们都是用div，而且考虑到手机的访问效果，没有两个div在同一行的，这点值得注意。

* 对于手机版，直接显示的图片都是比较小的，方便手机阅读和节省流量。即便是打开后的图片，也不是原图，而是比直接显示的图大一些的图片。只有点击原图时才会显示原图。

莫非这么一整咱的网站就进入移动互联网行列了？强！

其他细节：

还有新浪微博可能加了样式的缘故，在QQ浏览器中设置为大字体的时候，显示的还是小字体，不知道UC中显示大字体能不能成功，也许是浏览器原因吧。

搜狐微博和新浪微博都能够做到识别手机访问和网页访问，即手机访问weibo.com的时候，其实返回的是weibo.cn的页面。这是通过User-Agent，ruby: request.user_agent做到的。

如果涉及到多域名映射访问，请看我写的另外一个文章。搜索我的博文“多域名”