转自 http://my.oschina.net/cart/blog/282477

做前端开发不短了，用过jQuery Mobile jqMobi 也纯手工写过。。

最后总结如下：

jQuery Mobile：适合大而全，兼容性高，功能全，但是文件大，略显臃肿。。如果你是网页版、手机版共用jquery库等 适合使用jQuery Mobile。

jqMobi：适合单独就是手机版的站，体积小，速度快，但是兼容性没有jQuery Mobile好，功能没有jQuery Mobile全，但是一般也够用啦。

不过，如果你是简单的小功能手机版的话，杀鸡焉用牛刀啊，自己手写即可。

手机版网站要注意，结构形如：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1;" name="viewport" />

<link rel="dns-prefetch" href="//baidu.com"/>

<title>======</title>

</head>

<body>

</body>

</html>

手机版 一定要带上

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1;" name="viewport" />

其中如果你网站需要多个二级域名CDN，特别推荐以下代码：

<link rel="dns-prefetch" href="//baidu.com"/>

使用了浏览器DNS预读功能，大大加速你网站DNS解析的速度，强烈推荐使用。

网站开发使用像素，还是百分比？

使用像素设计网站：

网站开发使用像素优点

一般手机版以320PX来设计你的手机版即可，使用像素有个好处就是在任何设备上，表现出来的效果更能保持你设计出来的原汁原味，不会出现“意外”效果。

网站开发使用像素缺点

多种设备不能够智能自适应。

使用百分比设计网站：

网站开发使用百分比优点

不同设备可以自适应，基本都很漂亮

网站开发使用百分比缺点

不同设备，万一有一种设备的宽度不是你预料的，自适应等会“意外”的掉下来，不美观，开发、测试难度略大。

最后，做个总结：

  • 时间充裕的话，建议使用百分比来设计你的手机版网站。
  • 资源紧张，时间急促，人力有限，水平一般的话，建议还是老老实实的使用像素，宽度为320PX来设计你的手机版网站吧。

手机移动端网站设计完美解决方案

Bootstrap

viewport百科解析、viewport是什么、viewport作用、移动版自适应、手机版网站自适应

 
  <meta name="viewport"
      content="
          height = [pixel_value | device-height] ,
          width = [pixel_value | device-width ] ,
          initial-scale = float_value ,
          minimum-scale = float_value ,
          maximum-scale = float_value ,
          user-scalable = [yes | no] ,
          target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
      "
  />

 

width

控制 viewport 的大小，可以指定的一个值或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

height

和 width 相对应，指定高度。

target-densitydpi

一个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英寸点的数量（dpi）。Android支持三种屏幕像素密度：低像素密度，中像素密度，高像素密 度。一个低像素密度的屏幕每英寸上的像素点更少，而一个高像素密度的屏幕每英寸上的像素点更多。Android Browser和WebView默认屏幕为中像素密度。

下面是 target-densitydpi 属性的 取值范围

  • device-dpi –使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。
  • high-dpi – 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。
  • medium-dpi – 使用mdpi作为目标 dpi。 高像素密度设备相应放大， 像素密度设备相应缩小。 这是默认的target density.
  • low-dpi -使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。
  • <value> – 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70–400之间。
  <!-- html document -->
  <meta name="viewport" content="target-densitydpi=device-dpi" />
  <meta name="viewport" content="target-densitydpi=high-dpi" />
  <meta name="viewport" content="target-densitydpi=medium-dpi" />
  <meta name="viewport" content="target-densitydpi=low-dpi" />
  <meta name="viewport" content="target-densitydpi=200" />

为了防止Android Browser和WebView 根据不同屏幕的像素密度对你的页面进行缩放，你可以将viewport的target-densitydpi 设置为 device-dpi。当你这么做了，页面将不会缩放。相反，页面会根据当前屏幕的像素密度进行展示。在这种情形下，你还需要将viewport的 width定义为与设备的width匹配，这样你的页面就可以和屏幕相适应。

initial-scale

初始缩放。即页面初始缩放程度。这是一个浮点值，是页面大小的一个乘数。例如，如果你设置初始缩放为“1.0”，那么，web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”，那么这个页面就会放大为2倍。

maximum-scale

最大缩放。即允许的最大缩放程度。这也是一个浮点值，用以指出页面大小与屏幕大小相比的最大乘数。例如，如果你将这个值设置为“2.0”，那么这个页面与target size相比，最多能放大2倍。

user-scalable

用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变，反之为no。默认值是yes。如果你将其设置为no，那么minimum-scale 和 maximum-scale都将被忽略，因为根本不可能缩放。

所有的缩放值都必须在0.01–10的范围之内。

例：

    1. <meta name="viewport" content="width=device-width,user-scalable=no" />(设置屏幕宽度为设备宽度，禁止用户手动调整缩放)
    2. <meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>(设置屏幕密度为高频，中频，低频自动缩放，禁止用户手动调整缩放)

手机版WEB开发经验分享,手机版网站开发注意事项,网站自适应,手机版网站自适应,移动安卓APP自适应的更多相关文章

  1. WEBAPP开发技巧(手机网站开发注意事项)

    以下只是我个人得总结,如果你有更好的建议,请留言,一起共勉进步!!- -! 1.要响应式开发web,也就是页面必须自适应屏幕大小,可以采用流体布局,如之前的文章(自适应宽度布局),其他具体的小问题可以 ...

  2. Bootstrap手机网站开发案例

    Bootstrap手机网站开发案例 一.总结 一句话总结:Bootstrap手机网站开发注意事项(3点):a.引入viewpoint声明,b.通过屏幕宽动态控制元素显隐 c.图片添加自适应 1.Boo ...

  3. MVC5 网站开发实践 2.2、管理员身份验证

    上次完成了管理员的登录,这次要解决对管理员登录后的验证,采用AuthorizeAttribute属性的方式.之前还要解决几个问题,然后才重写验证类,最后稍微改一下界面. 目录 MVC5 网站开发实践  ...

  4. MVC5 网站开发实践 2.1、管理员登陆

    目录 MVC5 网站开发实践  概述 MVC5 网站开发实践  1.建立项目 MVC5 网站开发实践  2.后台管理   1. 创建SHA256加密方法. 在Data项目中添加文件夹[Security ...

  5. JSP网站开发基础总结《一》

    经过JAVASE的学习相信大家对JAVA已经不再陌生,那么JAVA都可以干什么呢?做算法.应用程序.网站开发都可以,从今天开始为大家奉上JAVAEE之JSP动态网站开发基础总结. 既然是动态网站开发, ...

  6. MVC5 网站开发实践 概述

    目录 MVC5 网站开发实践  概述 MVC5 网站开发实践  1.建立项目 MVC5 网站开发实践  2.后台管理 MVC5 网站开发实践  2.1.管理员登陆 MVC5 网站开发实践 2.2.管理 ...

  7. 玩转Django2.0---Django笔记建站基础十一(一)(音乐网站开发)

    第十一章 音乐网站开发 本章以音乐网站项目为例,介绍Django在实际项目开发中的应用,该网站共分为6个功能模块分别是:网站首页.歌曲排行榜.歌曲播放.歌曲点评.歌曲搜索和用户管理. 11.1 网站需 ...

  8. 腾讯技术分享：GIF动图技术详解及手机QQ动态表情压缩技术实践

    本文来自腾讯前端开发工程师“ wendygogogo”的技术分享,作者自评:“在Web前端摸爬滚打的码农一枚,对技术充满热情的菜鸟,致力为手Q的建设添砖加瓦.” 1.GIF格式的历史 GIF ( Gr ...

  9. 手机移动端网站开发流程HTML5

    手机移动端网站开发流程HTML5 最近一直在研究移动手机网站的开发,发现做手机网站没有想象中的那么难.为什么会这么说呢?我们试想下:我们连传统的PC网站都会做,难道连一个小小的手机网站难道都搞不定吗? ...

随机推荐

  1. UILabel属性小解

    #import "ViewController.h" @interface ViewController () @end @implementation ViewControlle ...

  2. 【转】Matrix67：十个利用矩阵乘法解决的经典题目

    好像目前还没有这方面题目的总结.这几天连续看到四个问这类题目的人,今天在这里简单写一下.这里我们不介绍其它有关矩阵的知识,只介绍矩阵乘法和相关性质.    不要以为数学中的矩阵也是黑色屏幕上不断变化的 ...

  3. 分布式版本控制系统Git-----3.图形化Tortoisegit创建本地库并且提交到远程服务器上

    [前提你已经有了自己的远程仓库帐号密码和HTTP地址] PS:图形化会方便,但是个人认为还是敲命令比较好,会锻炼人的思维和逻辑. 1.首先在任意一个地方创建test目录.若要把test目录放在Git的 ...

  4. 转：Web网站性能测试分析及调优实例

    1.背景 前段时间,性能测试团队经历了一个规模较大的门户网站的性能优化工作,该网站的开发和合作涉及多个组织和部门,而且网站的重要性不言而喻,同时上线时间非常紧迫,关注度也很高,所以对于整个团队的压力也 ...

  5. 版本控制器：SVN

    版本控制器:SVN 开发中的实际问题 小明负责的模块就要完成了,就在即将Release之前的一瞬间,电脑突然蓝屏,硬盘光荣牺牲!几个月来的努力付之东流--需求之一:备份! 这个项目中需要一个很复杂的功 ...

  6. Linux服务器rsync自动备份

    一.在 server 端配置 1. 编辑配置文件 #vi /etc/rsyncd.conf 添加下面的配置参数: uid = nobody # 该选项指定当该模块传输文件时守护进程应该具有的uid.默 ...

  7. hadoop 读取文件的两种方式

    1.操作javaAPI方式 static{ URL.setURLStreamHandlerFactory(new FsUrlStreamHandlerFactory()); } public stat ...

  8. 2、变量var关键字

    我们在看js声明变量的时候,经常会发现有的变量前会带var 但又的则没有,那么这究竟有什么区别呢? 如果这种情况发生在函数里的话, 加var定义的变量是局部变量,不加var定义的就成了全局变量. // ...

  9. List分页 参考

    public <T> List<List<T>> splitList(List<T> list, int pageSize) { int listSiz ...

  10. ggplot2 scale相关设置2—时间设置

    在scale设置中,常用的日期方面的设置函数包括: scale_x_date(),scale_y_date(),scale_x_datetime(),scale_y_datetime()   接下来, ...