Html5如何使我们开发出来的应用或页面大小能适合各种高端手机使用

本文简介:
1、手机移动端页面的自适应
2、手机触摸手动滑动效果

一、header信息的设置(自适应)
   1、声明信息 <!DOCTYPE HTML>
   2、编码设置 <meta charset="UTF-8"> 
   3、移动设备特别设置(重要声明!
   <meta content="width=device-width,user-scalable=no" name="viewport">

Viewport说明:该设置可使我们开发出的页面/产品 大小可适应各种高端移动设备
width=device-width 为设备的宽度.
user-scalable=no/yes 此功能为用户调整缩放。默认为yes。一般设置为no
PS:初次尝试制作移动端页面。亲们,由于我没有加上面的viewport声明,结果导致页面狼狈不堪。

二、手机触摸手动滑动效果
1、触摸屏效果滚动组件(js必须包含的部分)

<!--触摸屏效果滑动组件-->
<script type="text/javascript" src="./js/touch.js"></script>
<script type="text/javascript" src="./js/zepto.extend.js"></script>
<script type="text/javascript" src="./js/zepto.ui.js"></script>
<script type="text/javascript" src="./js/slider.js"></script>
<!--触摸屏效果滑动组件end-->

本人亲测以上4个js必须包含,缺一不可。
2、所要在手机端做滑动效果的部位(html代码部分)

<div class="head_nav_C" id="hongye_nav" style="height:60px;">
            <div style="background-color:white;">
                    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            </div>
            <div style="background-color:white;">
                      bbbbbbbbbbbbbbbbbbbbbbbbbbb
            </div>
            <div style="background-color:white;">
                        cccccccccccccccccccccccccccc
            </div>
            <div style="background-color:white;">
                         ddddddddddddddddddddddddd
            </div>
        </div>

3、js代码块(改代码会在动在要加滑动效果的html代码块中自动生成一块代码)

<script>
    Zepto(function($){//自动加载zepto组件
        $("#hongye_nav").slider({//为html 对应的id部分最佳slider属性
            autoPlay    : false, //是否自动
            showDot     : false,
            loop        : true,//是否循环
        });
    })
</script>

4、加载slider.css样式

<link rel="stylesheet" type="text/css" href="css/slider.css" />

附:
另外一种简单的写法(适用于幻灯)
html代码部分
<div id=”fla”>
  <img lazyload=”images/img2.jpg” />
  <img lazyload=”images/img3.jpg” />
</div>
2、js代码部分
<script>
//创建slider组件
$(‘#fla‘).slider();
</script>

附:小知识
一、字体效果
color:#FFF 定义字体的颜色
text-shadow:0 0 2px #146F61;(css3.0特效)
CSS3.0的文字阴影 text-shadow
语法:text-shadow: h-shadow v-shadow blur color;
也就是
text-shadow:【x轴(x offset) y轴(Y offst) 模糊半径(Blur) 颜色(color)】
例如:text-shadow: 5px 5px 5px #FF0000;

二、盒子模型圆角效果
border-radius 属性
例子:
div
{
border:2px solid;
border-radius:25px;
}
等价于:
div{
border:2px solid;
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
}

时间: 2024-11-13 04:09:30

Html5如何使我们开发出来的应用或页面大小能适合各种高端手机使用的相关文章

(转) 浅析HTML5在移动应用开发中的使用

(转)浅析HTML5在移动应用开发中的使用 (原)http://www.iteye.com/magazines/67 2012-03-07  来自 UECD.163.com  编辑 wangguo 有38498人浏览 收藏 html5 移动开发 app UI < > 猎头职位: 上海: Junior Product Manager 前言 HTML5的出现让移动平台的竞争由系统平台转向了浏览器之间:移动端的IE.Chrome.FireFox.Safari,亦或是新出现的浏览器,谁能达到在移动端对

nw.js桌面软件开发系列 第0.1节 HTML5和桌面软件开发的碰撞

第0.1节 HTML5和桌面软件开发的碰撞 当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Windows程序员的事实). 操作系统 API.操作系统发展到今日,几乎桌面应用的所有功能,都是基于系统API构建的.调用API和语言及技术无关,哪怕是使用汇编.例如(代码来源于网络,本地重新编译): ;我的第一个win32汇编程序 ;一个经典的hello world !程序 ;>>>>&

25 个超棒的 HTML5 &amp; JavaScript 游戏引擎开发库

25 个超棒的 HTML5 & JavaScript 游戏引擎开发库 就像在汽车中,引擎完成主要的工作,使汽车看起来不可思议.游戏引擎同理,游戏开发者完成细节的工作,使游戏看起来真实.吸引人眼球.游戏引擎负责其余的事情.早期,游戏开发者通常从草图做起,花费高昂,且不容易获利.为了让游戏开发更加简单容易,主要的开发者开始授权他们的基本游戏引擎,如 Unreal.而且,随着手机和平板游戏的出现,所需预算比以前更少,对 JAVASCRIPT 和HTML5 游戏引擎的需求大增. 如果你是一个游戏开发者,

使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 页面事件与 deferred

在系列的上一篇文章<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解>中,Kayo 介绍了除页面事件外的其他 jQuery Mobile 事件,而页面事件由于事件数较多,并且涉及 jQuery 中一个比较复杂的对象 deferred ,因此在本文中单独说明.jQuery Mobile 页面事件使用分为页面加载事件 (Page load events),页面跳转事件 (Page change events),页面显示/隐藏事件 (

兄弟连HTML5培训升级混合式开发课程体系

兄弟连HTML5培训升级混合式开发课程体系 在率先提出"混合开发"培训理念的基础上,为了确保授课内容更贴近企业及学员需要,兄弟连HTML5培训混合式开发课程再次升级!融于最新项目框架,紧跟企业发展步伐,加强项目开发经验,提升实战动手能力.学到的HTML5混合式开发课程不仅仅是概念,更重要的是实战经验,兄弟连HTML5培训给学生的起点,是别人达到不了的高点! 1.加强原生JS 企业越来越重视开发人员对于原生JS的掌握情况,而能否熟练掌握HTML5培训原生JS也关系到对JS框架的应用.如果

浅析HTML5在移动应用开发中的使用

前言 HTML5的出现让移动平台的竞争由系统平台转向了浏览器之间:移动端的IE.Chrome.FireFox.Safari,亦或是新出现的浏览器,谁能达到在移动端对HTML5更好的支持,谁就能在以后的移动应用领域占据更多的市场. 现在我们怎么装APP 有了HTML5以后怎么装APP 更灵活.更方便的app使用及安装方式将成为HTML5在移动平台上大放异彩的保障之一. 下面列举HTML5适合移动应用开发的几大特性: 1.离线缓存为HTML5开发移动应用提供了基础 HTML5 Web Storage

html5二八杠棋牌开发后端开发究竟是什么?

html5二八杠棋牌开发(h5.ttkmwl.com)软件应用程序就像冰山一样.用户看到的只是应用程序的一部分--在大多数情况下--应用程序的最大部分是看不到的.这就是令人难以捉摸又神秘的"后端". 在Web开发的篇章中,我们主要讨论Web开发,因为它涉及与最终用户的直接互动--我们可以称之为"前端Web开发". 在大多数应用中,非用户接口代码比用户接口代码多得多.复杂系统是在后台发生的各种使其工作的逻辑. 我们需要存储和检索数据,需要遵循业务逻辑和规则,并且需要对

jqm视频播放器,html5视频播放器,html5音乐播放器,html5播放器,video开发demo,html5视频播放示例,html5手机视频播放器

最近在论坛中看到了很多实用html5开发视频播放,音乐播放的功能,大部分都在寻找答案.因此我就在这里做一个demo,供大家相互学习.html5开发越来越流行了,而对于视频这一块也是必不可少的一部分.如何让你的网站占据优势,就要看你的功能和用户体验了.html5对video还是做了很多优惠的东西,我们使用起来很得心应手. 在过去 flash 是网页上最好的解决视频的方法,截至到目前还算是主流,像那些优酷之类的视频网站.虾米那样的在线音乐网站,仍然使用 flash 来提供播放服务.但是这种状况将会随

使Android开发方便快捷的8个好工具

Android是第二个最流行的用于智能手机和平板电脑的操作系统.这里有8个最好的 Android工具以许多不同的方式 帮助开发人员 ,例如 - SDK和AVD管理器,android ADT,android DDMS等等,每个工具表现其独特和不同的质量,使它非常有用于开发.如今,Android的开发一天一天地增长,在新的移动开发中变得越来越流行. 互联网上提供一些工具,可帮助开发人员轻松的Android开发.在这些工具的帮助下,开发人员可以更方便,快捷的方式开发应用程序. 现在,Android操作