手机网站设计的几个建议
手机网站设计的几个建议
手机网站设计的几个建议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建站，站点进行不同版式的自动适配
标签：手机网站
热门推荐
- 织梦tag标签怎样添加（DEDECMS织梦模板添加301重定向跳转网址对的代码教程）
- docker入门搭建博客（快速掌握使用Docker搭建开发环境）
- 宝塔面板防火墙是自动开的吗（宝塔面板开启隐藏的 waf 防火墙的方法）
- python撤回的微信消息怎么看（Python实现微信消息防撤回功能的实例代码）
- sqlserver 存储过程（SQL Server解析XML数据的方法详解）
- nginxmac启动脚本（Mac M1 Nginx 配置多站点的实现）
- vue控制div滚动条（vue3实现CSS无限无缝滚动效果）
- 非托管资源的回收
- laravel队列使用场景（Laravel使用RabbitMQ的方法示例）
- css中最常用的选择符（CSS 类选择符和ID选择符的区别）