毕业设计题目《基于three.js的太阳系全景漫游》,项目开发运行在手机端,开始学习手机端页面开发。

新建index.html,写meta标签。meta标签分为两大部分:http标题信息(http-equiv)和页面描述信息。

1、http-equiv属性的content-type值(显示字符集的设定)

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

  该标签定义了html页面所使用的的字符集,浏览器会根据此来调用相应的字符来展示页面。这条标签定义了页面使用的字符集为utf-8,它可以在同一页面显示中文简体、繁体以及其他语言(如日文、韩文)等。

2、name属性的viewport值(移动屏幕的缩放)

viewport:手机浏览器渲染页面时来,会将页面放在一个“虚拟”的窗口下,这个“虚拟”窗口就是viewport。通常“虚拟”的窗口比屏幕宽,用户可以通过平移和缩放查看页面的不同部分。移动版的safari浏览器引进了viewport这个meta标签,让网页开发者来控制viewport的大小和缩放,其他手机浏览器也能支持 。

  viewport并非只是ios上的独有属性,在Android、wp上同样也有viewport。它们解决的问题是一样的,即无视设备真实的设备真实分辨率,直接通过dpi{一个屏幕像素密度是由屏幕分辨率决定的,通常定义为每英寸点的数量(dpi)},在物理尺寸和浏览器之间重设分辨率,这个分辨率和设备的分辨率无关。比如说网站宽800px,设置width=800,来让网站在不同尺寸大小的设备上都刚好满屏显示网站。

一个viewport meta标签内容大致如下:<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">

width:控制viewport的大小,可以设定为确切的像素数,如width=600,或者设定为特殊的值,如width=device-width来指代比例为100%屏幕宽度时css的像素值。(相应由height及device-height属性,可能对包含基于viewport高度调整大小以及位置的元素的页面有用。)

initial-scale:控制页面初次加载时的缩放等级。

maximum-scale、minimum-scale以及user-scalable控制允许用户以怎样的方式放大或缩小页面。

maximum-scale:允许用户缩放的最大比例;mimimun-scale:允许用户缩放到的最小比例;user-scalable:用户是否可以手动缩放。

minimal-ui:在IOS 7.1的Safari新增“minimal-ui”可以让网页在加载时就隐藏了顶部地址栏和底部的导航栏。在IOS 8中就移除了该属性,因为一个原则:页面内容不应该能够控制系统的UI。

  即上面代码的意思是让viewport的宽度等于物理设备上的真实分辨率,不允许用户缩放。即故意舍弃viewport,不缩放页面,这样dpi肯定和设备上的真实分辨率一样,不做任何缩放,因此网站图片更显细腻,不会失真。类比将1000*1000的图片缩放至500*500。

3、name属性的format-detection值(是否将网页内容中的手机号码显示为拨号超链接)

  <meta name="format-detection" content="telephone=no">

  a.使设备浏览网页时对数字不启用电话功能(不同设备解释不同,iTouch点击数字为存入联系人,iPhone为呼叫电话),忽略将页面中的数字识别为电话号码。

4、name属性的apple-mobile-web-app-capable值(网站开启对web app程序的支持)

  <meta name="apple-mobile-web-app-capable" content="yes">

  设置为yes,网页就会在满屏模式的时候删除默认的苹果工具栏和菜单栏。

5、name属性的apple-mobile-web-app-status-bar-style值(改变顶部状态栏的颜色)

<meta name="apple-mobile-web-app-bar-style" content="black">

  默认值为default(白色),可以定为black以及black-translucent(灰色半透明),若为灰色半透明,将会占据页面位置,浮在页面上方。

唔,写页面结构

手机web页面开发-第一弹的更多相关文章

  1. 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能

    在做一个微信的微网站中的一个便民服务电话功能的应用,用到移动web页面中列出的电话号码,点击需要实现调用通讯录,网页一键拨号的拨打电话功能. 如果需要在移动浏览器中实现拨打电话,发送email,美国服 ...

  2. [HTML] 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能

    在做一个微信的微网站中的一个便民服务电话功能的应用,用到移动web页面中列出的电话号码,点击需要实现调用通讯录,网页一键拨号的拨打电话功能. 如果需要在移动浏览器中实现拨打电话,发送email,美国服 ...

  3. X5的UI部分和传统Web页面开发的差异

    http://doc.wex5.com/different-with-std-web-ui/#1 X5的UI部分和传统Web页面开发的差异 WeX5是跨端移动开发框架,BeX5是基于WeX5的企业快速 ...

  4. 手机web app开发笔记

    各位朋友好,最近自学开发了一个手机Web APP,“编程之路”,主要功能包括文章的展示,留言,注册登录,音乐播放等.为了记录学习心得,提高自己的编程水平,也许对其他朋友有点启发,特整理开发笔记如下. ...

  5. 移动端web页面开发常用的头部标签设置

    在移动端web页面开发中,我们常需要设置各种头部标签以帮助浏览器更好的解析页面,将页面完美呈现,这里列出了工作中常用的各种头部标签,以备查询. viewport <meta name=" ...

  6. 导航页的开发--手机web app开发笔记

    好了,的所有的基础知识已经准备完毕了,现在开始制作引导页.这个引导页需要一个HTML文件,JS文件,一个CSS文件.在HBuilderX中根目录下添加“Guid.html”,在JS文件夹添加“myth ...

  7. 响应式WEB页面开发实践

    转自:https://github.com/markyun/My-blog/issues/27 最近得到一个新任务单,让我用一套页面适应所有主流终端(Android.iPhone.iPad.PC),而 ...

  8. 微信小程序开发-第一弹

    前言:       本篇文章为大家详细介绍微信小程序开发第一篇,后续步骤会逐步更新,欢迎大家关注. 第一步  注册        1.1 打开网址 https://mp.weixin.qq.com/  ...

  9. 默认文档接卸--手机web app开发笔记(二)

    首先我们启动HBuilderX2.0 ,界面如图2-1所示 图2-1 软件开发界面 单击“文件—新建—项目”,弹出新建项目管理界面,我们在里面进行了项目类型选择“5+APP”.项目名称填写“编程之路” ...

随机推荐

  1. caffe安装过程中遇到的问题以及解决方法

    1. 在安装依赖库的时候,遇到: @gxjun-Latitude-E5440:~$ sudo apt-get install libatlas-base-dev 正在读取软件包列表... 完成 正在分 ...

  2. svn设置外网访问

    1.设置路由器 默认协议为:https 端口号:443 服务器地址:https://主机名/svn/版本库 例:https://mleo-pc/svn/Share/ 也可就主机名用IP地址代替 如:h ...

  3. NoSQL生态系统——事务机制,行锁,LSM,缓存多次写操作,RWN

    13.2.4 事务机制 NoSQL系统通常注重性能和扩展性,而非事务机制. 传统的SQL数据库的事务通常都是支持ACID的强事务机制.要保证数据的一致性,通常多个事务是不可能交叉执行的,这样就导致了可 ...

  4. innoDB 存储引擎

    innodb 是在mysql 5.5.8 及之后的版本中成为mysql的默认存储引擎.之前都使用myisam.   innodb 是事务型的存储引擎 支持ACID事务,适用于小事务.   1.表空间类 ...

  5. json数组转数组对象

    import java.io.IOException; import net.sf.json.JSONArray; import net.sf.json.JSONObject; import com. ...

  6. Apache与nginx优缺点对比

    1.nginx相对于Apache优点: nginx轻量级,同样起web服务,比apache占用更少的内存资源: 抗并发,nginx处理请求是异步非阻塞型的,Apache处理请求是阻塞型的,所以在处理高 ...

  7. Lex&Yacc Parser错误发生后再次parser之前恢复初始状态

    使用lex yacc 对文件进行parser时,如果文件内容有错,parser报错,然后你修改了文件,再次读入文件进行parser,如果你不是重启程序进行parser,那就需要对做些处理了. &quo ...

  8. Linux 关机命令

    正确的关机流程是:sync –> shutdown/reboot/halt/poweroff sync 将数据由内存同步到硬盘中. shutdown 关机指令.例如你可以运行如下命令关机: sh ...

  9. php_html转译符号

    1.双引号 /" 或者 " 2.单引号 ' > 4. & &

  10. java时间戳

    1.时间戳的定义 时间戳是指文件属性里的创建.修改.访问时间. 数字时间戳技术是数字签名技术一种变种的应用.在电子商务交易文件中,时间是十分重要的信息.在书面合同中,文件签署的日期和签名一样均是十分重 ...