手机网站设计的几个建议
手机网站设计的几个建议
手机网站设计的几个建议1、因为手机大多是高级浏览器，可以使用html5+css3开发
2、合理灵活的使用meta标签，具体如下
<meta content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;” name=”viewport” /> <meta content=”yes” name=”apple-mobile-web-app-capable” /> <meta content=”black” name=”apple-mobile-web-app-status-bar-style” /> <meta content=”telephone=no” name=”format-detection” />第一个meta标签：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；
第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览，隐藏浏览器导航栏；
第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码，个别需要识别的话可以这样开启：<a href=”tel:13030303030″>13030303030</a>
3、当设置分辨率太小的话，显示正常模块显得太拥挤的情况下，可以利用media queries根据分辨率适当的显示或隐藏模块，如768px下显示2列布局，320px显示1列布局等
4、当然也可以根据判断不同的终端跳转到不同的URL
5、一定要注意链接的大小
操作对象的大小符合手指的操作，按键的大小设置规范：
（1）、食指点击的间距 约为7*7 mm， 1mm间距
（2）、拇指点击8*8 mm，2mm间距。当前推荐的值为9mm 大小，最小应不小于7mm
（3）、当然一些重要操作，或者频繁点击的区域可以设置的略微更大一些
6、要做好优雅降级（平稳退化）少用JS，图片，要用户禁止下载JS和图片的时候页面也能体现价值
7、解决闪屏，-webkit-backface-visibility:hidden;-webkit-transform-style:preserve-3d
8、触摸事件用touch系列，不要用click替代
9、对于图片的处理，让图片自适应，防止图片变形当然要兼容的设备分辨率差距很大的时候，需要利用media queries根据分辨率的不同加载不同的图片（需要同一张设置为几种不同的规格）,一是防止小分辨率设备加载大图片浪费流量，二是防止大分辨率设备加载 小图片导致的图片模糊问题
10、为了方便搜索引擎对移动站的识别，要加入合适的DOCTYPE声明
11、减少无效链接
没有一个网页没有内容，或者内容无效，建议用http状态码指定，这里是用302跳转，而不是javascript等等之类
12、为了迎合手机终端的发展方向，建设移动站的时候最好使用html5和xhtml建站，站点进行不同版式的自动适配
标签：手机网站
热门推荐
- vs和sql安装顺序（VS2015安装之后加装Sql server2014详细步骤）
- win10下安装mysql8.0.23 及 “服务没有响应控制功能”问题解决办法（win10下安装mysql8.0.23 及 “服务没有响应控制功能”问题解决办法）
- mvc中@RenderSection()
- mysql索引基本知识（MySql索引使用策略分析）
- 如何让网站在360浏览器自动以极速模式显示
- js图片水印库（js给图片打马赛克的方法示例）
- 租用云服务器或者云主机价格（云主机租用注意事项有哪些？）
- sqlserver完全删除教程（sql server编写archive通用模板脚本实现自动分批删除数据）
- webpack打包分析（webpack代码分片的实现）
- 微信小程序的交通码（微信小程序中实现车牌输入功能）