文档章节

手机版WEB开发经验分享,手机版网站开发注意事项,网站自适应,手机版网站自适应,移动安卓APP自适应

letwang
 letwang
发布于 2014/06/20 17:42
字数 1511
阅读 6882
收藏 60
点赞 3
评论 6

http://my.oschina.net/cart/

做前端开发不短了,用过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"/>(设置屏幕密度为高频,中频,低频自动缩放,禁止用户手动调整缩放)

http://my.oschina.net/cart/

© 著作权归作者所有

共有 人打赏支持
letwang
粉丝 140
博文 67
码字总数 76298
作品 0
南京
技术主管
加载中

评论(6)

许辰_
许辰_
谢谢提供学习思路
yuxiaoxia28
yuxiaoxia28
学习啦,谢谢
The-duke
The-duke
不错。。最近在做移动的页面,学习到了。。。
野草
野草
一般用640px来设计,然后用viewport去协调
许雷神
许雷神
谢谢
fzxu_05
fzxu_05
lan
一天完成把PC网站改为自适应!原来这么简单!

网站自适应,很多人都认为是很高级需要很多时间去实现的东西,不愿意去把一个现成的网站改成自适应,宁愿单独另外做一个移动站。我之前觉得实现网站自适应,要设计很多套CSS,并且要结合jQu...

hhj187 ⋅ 2016/08/23 ⋅ 0

最新小说网站源码 带会员系统 带3个wap端 火车头自动采集+网页采集

最新小说网站源码 带会员系统 带3个wap端 火车头自动采集+网页采集 笔趣阁:www.xs.520jun.com 自适应手机端:http://www.xs.520jun.com/wap/ 触屏版手机端:http://www.xs.520jun.com/wapt...

myjnt ⋅ 05/13 ⋅ 0

【CF 应用开发大赛】APS移动分享社区

应用名称:APS移动分享社区 应用URL地址:http://apsshare.sdapp.cn/ 应用说明及使用场景: 很小巧的移动版CMS,可用于做个人博客,阅读网站,CMS,论坛等移动客户端,体积小,速度快,自适应...

tangc ⋅ 2013/01/14 ⋅ 1

[转]手机网站开发的一些总结

手机版网站起码要实现一些基本的功能吧: 1.页面的适用性问题。对于移动终端,有不一样的分辨率与屏幕尺寸,如果还像电脑端的设计还限制网页的宽度为1003px或其他像素值,字体大小还用12px或...

长平狐 ⋅ 2012/06/08 ⋅ 0

也许,DOM 不是答案

有一个词"手机网站"(mobile web),指供手机浏览的网站,但它是不存在的。 人们提到"移动互联网"的时候,其实专指另外一样东西:手机App。 一、Web App vs. Native App 比起手机App,网站有...

阮一峰 ⋅ 2015/02/22 ⋅ 0

将HTML5封装成android应用APK文件的几种方法

作为下一代的网页语言,HTML5拥有很多让人期待已久的新特性。HTML5的优势之一在于能够实现跨平台游戏编码移植,现在已经有很多公司在移动 设备上使用HTML5技术。随着HTML5跨平台支持的不断增...

QQ2205357007 ⋅ 2017/05/21 ⋅ 0

推荐几篇好的博文

推荐网址: UI设计类: 源代码托管: 移动开发 界面优化 兼容屏幕 布局详解 JNI入门 AndroidMk NDK相关问题 NDK_GDB调试 CrystaX CSDN每周博文 其它博客 开发工具问题 源码控制工具 混淆反编 ...

postdep ⋅ 2014/12/09 ⋅ 0

推荐几篇好的博文

Android Fragment应用实战,使用碎片向ActivityGroup说再见 Android手机平板两不误,使用Fragment实现兼容手机和平板的程序 Android事件分发机制完全解析,带你从源码的角度彻底理解(上) And...

军歌 ⋅ 2014/02/20 ⋅ 0

腾讯正式进军手机输入法

导读:刚刚百度发布了手机的输入法,腾讯也开始了。 不久前,笔者参加了 QQ拼音手机版Symbian S60 V3版公测活动。虽然腾讯一直低调应对推出手机输入法的传闻,但是今天腾讯正式对外开放QQ拼音...

红薯 ⋅ 2009/11/26 ⋅ 3

两种快速打造App的方法

几年前,做App还是土豪和移动开发者的专利。移动开发者使用Java或者C++这类开发工具,将一行行代码变成可以被手指轻松触控的应用。土豪们花钱雇佣这些移动开发者,实现自己所想要的功能。制作...

卢松松 ⋅ 2013/12/02 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

mysql5.7系列修改root默认密码

操作系统为centos7 64 1、修改 /etc/my.cnf,在 [mysqld] 小节下添加一行:skip-grant-tables=1 这一行配置让 mysqld 启动时不对密码进行验证 2、重启 mysqld 服务:systemctl restart mysql...

sskill ⋅ 13分钟前 ⋅ 0

Intellij IDEA神器常用技巧六-Debug详解

在调试代码的时候,你的项目得debug模式启动,也就是点那个绿色的甲虫启动服务器,然后,就可以在代码里面断点调试啦。下面不要在意,这个快捷键具体是啥,因为,这个keymap是可以自己配置的...

Mkeeper ⋅ 17分钟前 ⋅ 0

zip压缩工具、tar打包、打包并压缩

zip 支持压缩目录 1.在/tmp/目录下创建目录(study_zip)及文件 root@yolks1 study_zip]# !treetree 11└── 2 └── 3 └── test_zip.txt2 directories, 1 file 2.yum...

蛋黄Yolks ⋅ 20分钟前 ⋅ 0

聊聊HystrixThreadPool

序 本文主要研究一下HystrixThreadPool HystrixThreadPool hystrix-core-1.5.12-sources.jar!/com/netflix/hystrix/HystrixThreadPool.java /** * ThreadPool used to executed {@link Hys......

go4it ⋅ 39分钟前 ⋅ 0

容器之上传镜像到Docker hub

Docker hub在国内可以访问,首先要创建一个账号,这个后面会用到,我是用126邮箱注册的。 1. docker login List-1 Username不能使用你注册的邮箱,要用使用注册时用的username;要输入密码 ...

汉斯-冯-拉特 ⋅ 45分钟前 ⋅ 0

SpringBoot简单使用ehcache

1,SpringBoot版本 2.0.3.RELEASE ①,pom.xml <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.0.3.RELE......

暗中观察 ⋅ 46分钟前 ⋅ 0

监控各项服务

比如有三个服务, 为了减少故障时间,增加监控任务,使用linux的 crontab 实现. 步骤: 1,每个服务写一个ping接口 监控如下内容: 1,HouseServer 是否正常运行,所以需要增加一个ping的接口 ; http...

黄威 ⋅ 49分钟前 ⋅ 0

Spring源码解析(八)——实例创建(下)

前言 来到实例创建的最后一节,前面已经将一个实例通过不同方式(工厂方法、构造器注入、默认构造器)给创建出来了,下面我们要对创建出来的实例进行一些“加工”处理。 源码解读 回顾下之前...

MarvelCode ⋅ 49分钟前 ⋅ 0

nodejs __proto__跟prototype

前言 nodejs中完全没有class的这个概念,这点跟PHP,JAVA等面向对象的语言很不一样,没有class跟object的区分,那么nodejs是怎么样实现继承的呢? 对象 对象是由属性跟方法组成的一个东西,就...

Ai5tbb ⋅ 56分钟前 ⋅ 0

Ubuntu16.04 PHP7.0 不能用MYSQLi方式连接MySQL5.7数据库

Q: Ubuntu16.04 PHP7.0 不能用MYSQLi方式连接MySQL5.7数据库 A: 执行以下2条命令解决: apt-get install php-mysql service apache2 restart php -m 执行后会多以下4个模块: mysqli mysqlnd...

SamXIAO ⋅ 58分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部