当前位置: 首页 >> WEB前端开发|DIV+CSS|javascript|AJAX >> 阅读正文

Web APP页面制作简单实例教程和经验分享

找专业的人,做专业的事 | 为您提供设计管家服务

今天25学堂跟大家来普及下如何去制作一个很简单的web APP页面或者说是一个微信端页面。然后也跟大家说一下移动端html5开发的一些常识和干货分享。适合移动端的界面制作,优化和兼容性调整工作的同学们来学习和回顾。

webapp开发

1、智能手机分辨率:(tips:这里显示的都是网页端的尺寸@1x的尺寸)

预设的分辨率有(可切换横版,竖版)

普通智能手机:320×480   竖版

iPhone5:320×568  竖版

iphone6:375 ×667 竖版

普通平板:800×600

iPad2、3、mini:768×1024

宽屏电脑:1280×800

HDTV:1920×1080

另外,也可以自定义分辨率。

 

2、节省样式的加载

目前而言,要改变网站的配色方案或者写iPad专用的样式表,是通过如下代码:

@media only screen and (min-device-width:640px) { ... }//例如,适应某设备的分辨率

其实,没有必要这样让你的样式表白白超载。可以通过下面这个方法去加载指定分辨率下的样式。

<link rel="stylesheet" href="css.css" media="only screen and (min-device-width:640px)">

这样的好处是,只有当你的使用相应的设备,才能加载到相应的样式表。

css3ps

 

 

二、meta标签,即CSS媒体查询

1) <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
    //强制让文档的宽度与设备的宽度保持1:1,
    //文档初始化缩放比例是1:1,
    //不允许用户点击屏幕放大浏览,
    //允许用户缩放到的最大比例,
    //尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开,如果不规范将不会起作用。
其他属性有:
width;
height; 
initial-scale; 
minimum-scale; 
maximum-scale; 
user-scalable; 

2) <meta name="apple-mobile-web-app-capable" content="yes" />
    //iPhone私有标签,它表示:允许全屏模式浏览

3) <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    //iPhone私有标签,它指定的iPhone中safari顶端的状态条的样式

4) <meta name="format-detection" content="telephone=no; email=no" />
    //不识别邮件和不把数字识别为电话号码

CSS3TransitionandAnimation-7

 

二、CSS3  -webkit  相关的HTML5标记元素的使用。

1、问题描述:移动端表单类有圆角、阴影,点击链接时,有灰色底高亮等

1) 消除被点击元素的外观变化,所谓的点击后高亮:
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0);

2) 阻止旋转屏幕时自动调整字体大小:-webkit-text-size-adjust:none;

3) 解决字体在移动端比例缩小后出现锯齿的问题:-webkit-font-smoothing: antialiased;

4) 盒子阴影:-webkit-box-shadow: none;

5) 圆角:-webkit-border-radius: 0;

6) appearance 属性使元素看上去像标准的用户界面元素,
    也可以取消默认的样式:-webkit-appearance: none;

7) 鼠标可以悬停在内容上(指向该内容)而不激活它(单击它):-webkit-touch-action: manipulation;  

三、使用自适应模式布局
为了让用户在safari中正常的浏览网页,我们必须保证用户的设备处于任何一个方位时,safari都能够正常的显示网页内容(也就是自适应),而且自适应之后也不用考虑分辨率的问题。
比如:-webkit-box,流体盒模型,这是一种自适应的解决方案。

四、javascript库
更多的js库可以点击查看:webapp开发框架推荐以及优缺点分析【webAPP干货】

有很多设备的“devicePixelRatio”都大于1.5或者等于2(window.devicePixelRatio = 物理像素/dips)。 移动端web app上CSS要为Retian屏幕准备另外的图片及代码:
方法一:

<script type="text/javascript" src="<路径>/retina.js"></script>//使用方法
<style>
.logo {
  background-image: url('/images/my_image.png'); //通用屏幕
}

@media all and (-webkit-min-device-pixel-ratio: 1.5) { //当使用Retina屏幕时,读取此段样式
  .logo {
    background-image: url('/images/my_image@2x.png');
    background-size: 200px 100px; //限定大图片的大小
  }
}
</style>

方法二:

<img src="/images/image.png" /> //通用屏幕
<img src="/images/my_image.png" data-at2x="<路径>/image@2x.png" /> //retina屏幕

2. fastclick.js
说明这个要重点介绍一下!
当触发”Click”事件时,移动端浏览器将等待约300毫秒的时间后再做出响应,原因是浏览器要判断用户是否执行双击。
导入 fastclick.js 即可减少这个时间差:

<script type='application/javascript' src='/path/to/fastclick.js'></script>

jQuery 使用方法:

$(function() {
    FastClick.attach(document.body);
});

五、App icon 制作

ios-app-icon-template-10

说明:所谓单机模式,其实就是通过把网站添加到主屏,由主屏进入并访问网站的一种方式。通常,app icon是自动截取网站的一部分截图。这样并不是很美观,但也可以通过代码来解决这个问题。
尺寸:在iPhone上的默认大小是57px,在iPad上是72px。icon原始图片建议尺寸为128px或者256,并且不建议自行添加光影效果,因为OS自带了。

<link rel="apple-touch-icon" href="/path/to/custom-icon.png">

// 若想去掉系统自带的反光效果,可以增加“-precompsed”属性。
<link rel="apple-touch-icon-precompsed" href="/path/to/custom-icon.png"> 

 

App Icon 设计资源

图标模板:App Icon Template
设计灵感:iOS Icon GalleryHongkiat
制作工具:MakeAppIconiconkit(付费软件)
其他技巧

Float属性替换

使用display:inline-block属性代替;因为float不适用于反向停靠和无法接受水平间隙
检测用户是通过主屏启动你的web app
从主屏启动的web app和浏览器访问web app最大的区别 是它清除了浏览器上方和下方的工具条,这样web app就更加像是native app了。

window.navigation.standalone

if(!window.navigation.standalone) {
   ...// do your magic
}

此外,还可以通过以下方式,停留在单机模式中。

//最简单的方法
 <a href="http://www.qmyo.com/" 
    onclick="window.location.href=this.href; return false">QmyO</a>

//改进一下,写成函数
function openLink(anchor) {
    window.location.href = anchor.href;
    return false;
}
//调用
<a href="http://www.QmyO.com/" onclick="return openLink(this)">QmyO</a>

//更广泛的使用,如页面导航
/* 创建一个全局点击事件监听器 */
document.addEventListener("click", clickHandler, false);
function clickHandler(e) {
       var element = e.target;
       /* 只处理锚标签元素 <a> */
       if (element.localName.toUpperCase() != 'A') {
           return;
       }
       /* 忽略target属性。*/
       if (!!element.getAttribute('target')) {
           return;
       }
       var url = element.href;
       /* 忽略不符合https正则规范以为的内容并区分来源 */
       var match = url.match(/^https?:\/\/(.+?)\/.*$/);
       if (!match || match[1] != window.location.host) {
              return;
       }
       /* 最后打开全屏幕视图的链接,来防止默认行为 */
       window.location.href = url;
       e.preventDefault();
}
//注意:当a标签含有子标签如: <a href="pic.png"><img src="pic.png"></a>
  这个脚本就不起作用了,因为接收事件的不是链接,而是img标签。
  但其他情况下都能使用户留在单机模式内。当点击外部链接时,OS可能会跳至浏览器。

如何解决盒子边框溢出 当指定了一个块级元素时,并且为其定义了边框,设置了其宽度为100%。在移动设备开发过程中我们通常会对文本框定义为宽度100%,将其定义为块级元 素以实现全屏自适应的样式,但此时,该元素的边框(左右)各1个像素会溢了文档,导致出现横向滚动条,为解决这一问题,可以为其添加一个特殊的样式:

-webkit-box-sizing:border-box;
//用来指定该盒子的大小包括边框的宽度。

自动大写与自动修正

关闭这两项功能,可以通过autocapitalize 与autocorrect 这两个选项

<input type="text" autocapitalize="off" autocorrect="off" />

横板与竖版


方法一:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" />
// 肖像模式样式       
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" />
// 风景模式样式

方法二:

//肖像模式样式
<style media="all and (orientation:portrait)" type="text/css">
   #landscape { display: none; }
</style>

//风景模式样式 
<style media="all and (orientation:landscape)" type="text/css">
   #portrait { display: none; }
</style>  


无觅相关文章插件,快速提升流量

本文标题:Web APP页面制作简单实例教程和经验分享

本文地址:http://www.25xt.com/webdevelop/7977.html

本文关键词: , ,

除非注明,本站文章均为原创或编译,转载请注明出处和原文链接,转载同时请务必保留原网站网址。