web移动端

meta基础知识
H5页面窗口自动调整到设备宽度，并禁止用户缩放页面
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

忽略将页面中的数字识别为电话号码
<meta name="format-detection" content="telephone=no" />

忽略Android平台中对邮箱地址的识别
<meta name="format-detection" content="email=no" />

当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- ios7.0版本以后，safari上已看不到效果 -->

将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 可选default、black、black-translucent -->

viewport模板

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
  6. <meta content="yes" name="apple-mobile-web-app-capable">
  7. <meta content="black" name="apple-mobile-web-app-status-bar-style">
  8. <meta content="telephone=no" name="format-detection">
  9. <meta content="email=no" name="format-detection">
  10. <title>标题</title>
  11. <link rel="stylesheet" href="index.css">
  12. </head>
  13. <body>
  14. 这里开始内容
  15. </body>
  16. </html>

常见问题

移动端如何定义字体font-family
中文字体使用系统默认即可，英文用Helvetica

/* 移动端定义字体的代码 */
body{font-family:Helvetica;}
参考《移动端使用字体的思考》

移动端字体单位font-size选择px还是rem
对于只需要适配手机设备，使用px即可

对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备

rem配置参考：

  1. html {font-size:10px}
  2. @media screen and (min-width:480px) and (max-width:639px) {
  3. html {
  4. font-size: 15px
  5. }
  6. }
  7. @media screen and (min-width:640px) and (max-width:719px) {
  8. html {
  9. font-size: 20px
  10. }
  11. }
  12. @media screen and (min-width:720px) and (max-width:749px) {
  13. html {
  14. font-size: 22.5px
  15. }
  16. }
  17. @media screen and (min-width:750px) and (max-width:799px) {
  18. html {
  19. font-size: 23.5px
  20. }
  21. }
  22. @media screen and (min-width:800px) and (max-width:959px) {
  23. html {
  24. font-size: 25px
  25. }
  26. }
  27. @media screen and (min-width:960px) and (max-width:1079px) {
  28. html {
  29. font-size: 30px
  30. }
  31. }
  32. @media screen and (min-width:1080px) {
  33. html {
  34. font-size: 32px
  35. }
  36. }

ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉
ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0，也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

部分android系统中元素被点击时产生的边框怎么去掉
android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果

a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0;)
-webkit-user-modify:read-write-plaintext-only; 
}
-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符

另外，有些机型去除不了，如小米2

对于按钮类还有个办法，不使用a或者input标签，直接用div标签

打电话发短信的怎么实现
打电话
<a href="tel:0755-10086">打电话给:0755-10086</a>
发短信，winphone系统无效
<a href="sms:10086">发短信给: 10086</a>

屏幕旋转的事件和样式
事件
window.orientation，取值：正负90表示横屏模式、0和180表现为竖屏模式；

  1. window.onorientationchange = function(){
  2. switch(window.orientation){
  3. case -90:
  4. case 90:
  5. alert("横屏:" + window.orientation);
  6. case 0:
  7. case 180:
  8. alert("竖屏:" + window.orientation);
  9. break;
  10. }
  11. }

样式

  1. //竖屏时使用的样式
  2. @media all and (orientation:portrait) {
  3. .css{}
  4. }
  5. //横屏时使用的样式
  6. @media all and (orientation:landscape) {
  7. .css{}
  8. }
  9. audio元素和video元素在ios和andriod中无法自动播放
  10. 应对方案：触屏即播
  11. $(‘html‘).one(‘touchstart‘,function(){
  12. audio.play()
  13. })

摇一摇功能
HTML5 deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。

手机拍照和上传图片

  1. <input type="file">的accept 属性
  2. <!-- 选择照片 -->
  3. <input type=file accept="image/*">
  4. <!-- 选择视频 -->
  5. <input type=file accept="video/*">

常用的移动端框架

zepto.js
语法与jquery几乎一样，会jquery基本会zepto~

最新版本已经更新到1.16

官网：http://zeptojs.com/

中文(非官网)：http://www.css88.com/doc/zeptojs_api/

常使用的扩展模块：

浏览器检测：https://github.com/madrobby/zepto/blob/master/src/detect.js

tap事件：https://github.com/madrobby/zepto/blob/master/src/touch.js

iscroll.js
解决页面不支持弹性滚动，不支持fixed引起的问题~

实现下拉刷新，滑屏，缩放等功能~

最新版本已经更新到5.0

官网：http://cubiq.org/iscroll-5

underscore.js
笔者没用过，不过听说好用，推荐给大家~

该库提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象。

最新版本已经更新到1.8.2

官网：http://underscorejs.org/

滑屏框架
适合上下滑屏、左右滑屏等滑屏切换页面的效果
slip.js

iSlider.js

fullpage.js

flex布局
flex布局目前可使用在移动中，并非所有的语法都全兼容，但以下写法，效果良好~

  1. /* ============================================================
  2. flex：定义布局为盒模型
  3. flex-v：盒模型垂直布局
  4. flex-1：子元素占据剩余的空间
  5. flex-align-center：子元素垂直居中
  6. flex-pack-center：子元素水平居中
  7. flex-pack-justify：子元素两端对齐
  8. 兼容性：ios 4+、android 2.3+、winphone8+
  9. ============================================================ */
  10. .flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
  11. .flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
  12. .flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
  13. .flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
  14. .flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
  15. .flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}

示例：两端对齐

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
  6. <meta content="yes" name="apple-mobile-web-app-capable">
  7. <meta content="black" name="apple-mobile-web-app-status-bar-style">
  8. <meta content="telephone=no" name="format-detection">
  9. <meta content="email=no" name="format-detection">
  10. <style type="text/css">
  11. /* ============================================================
  12. flex：定义布局为盒模型
  13. flex-v：盒模型垂直布局
  14. flex-1：子元素占据剩余的空间
  15. flex-align-center：子元素垂直居中
  16. flex-pack-center：子元素水平居中
  17. flex-pack-justify：子元素两端对齐
  18. 兼容性：ios 4+、android 2.3+、winphone8+
  19. ============================================================ */
  20. .flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
  21. .flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
  22. .flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
  23. .flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
  24. .flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
  25. .flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}
  26. </style>
  27. </head>
  28. <body>
  29. <div class="flex flex-pack-justify">
  30. <div>模块一</div>
  31. <div>模块二</div>
  32. <div>模块三</div>
  33. <div>模块四</div>
  34. </div>
  35. </body>
  36. </html>

页面模块命名
头：header
        内容：content/container
        尾：footer
        导航：nav
        侧栏：sidebar
        栏目：column
        页面外围控制整体布局宽度：wrapper
        左右中：left right center
        登录条：loginbar
        标志：logo
        广告：banner
        页面主体：main
        热点：hot
        新闻：news
        下载：download
        子导航：subnav
        菜单：menu
        子菜单：submenu
        搜索：search
        友情链接：friendlink
        页脚：footer
        版权：copyright
        滚动：scroll
        小技巧：tips

时间： 2024-10-12 14:44:45

web移动端的相关文章

web移动端开发经验总结

整理web移动端开发经验,部分内容借鉴于网上的博文. 1.meta标签 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;" /> <!-- width可视宽度,initial-scale初始化缩放比例,maximum-scale允许用户缩放的最大比例,minimum-scale允许用户缩放的最小

关于web移动端返回到顶部的解决方案

在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的动画,然后用到web移动端却没什么卵用,会出现滚动不流畅,卡顿,失灵等等现象. 这是因为移动端的scroll事件触发不频繁,有可能检测不到有<=0的情况 为此,移动端判断次数好些, 下面是具体实现代码,兼容pc: //返回顶部动画 //goTop(500);//500ms内滚回顶部 function goTop(times){  if(!!!times){   $(window).scrollTop(0);   r

从web移动端布局到react native布局

在web移动端通常会有这样的需求,实现上中下三栏布局(上下导航栏位置固定,中间部分内容超出可滚动),如下图所示: 实现方法如下: HTML结构: <div class='container'> <div class='header'></div> <div class='content'></div> <div class='footer'></div> </div> 首先可以利用fixed或者absolute

如何提高Web服务端并发效率的异步编程技术

作为一名web工程师都希望自己做的web应用能被越来越多的人使用,如果我们所做的web应用随着用户的增多而宕机了,那么越来越多的人就会变得越来越少了,为了让我们的web应用能有更多人使用,我们就得提升web应用服务端的并发能力.那么我们如何做到这点了,根据现有的并发技术我们会有如下选择: 第一个做法:为每个客户端发送给服务端的请求都开启一个线程,等请求处理完毕后该线程就被销毁掉,这种做法很直观,但是在现代的web服务器里这种做法已经很少使用了,原因是新建一个线程,销毁一个线程的开销(开销是指占用

搭建一个java web服务端

最近也是做了一个简单的java web 项目,由于以前也是没接触过,在这里记录下搭建一个web服务端的过程. 一般我们做一个服务端要么在本地自己的电脑上先安装环境,一般是windows系统,主要安装jdk + tomcat + mysql,这些安装教程网上都有,也很简单,我这里就不多说了,我要讲的是在一个远程linux服务器上搭建web服务端环境. 对于一个liunx服务器,我们可以使用xshell等终端工具登录来操作远程服务器,使用xshell的好处是,我们可以使用rz ,sz命令上传上载文件

winform客户端利用webClient实现与Web服务端的数据传输

由于项目需要,最近研究了下WebClient的数据传输.关于WebClient介绍网上有很多详细介绍,大概就是利用WebClient可以实现对Internet资源的访问.无外乎客户端发送请求,服务端处理请求.回应请求.所以,我下面就简单描述下学习过程中遇到的一些问题: 1.关于Winform客户端请求 WebClient wc = new WebClient();//初始化webclient string path = "http://192.168.1.115:8089/Handler1.as

媒体电商团队承接Web移动端中小项目

媒体电商团队承接Web移动端中小项目. 1.承接业务:微直播.摇一摇.h5小游戏.会务.社区.微信红包.分销商城等. 2.联系方式:微信号:xie9650,手机:18613954008 ,具体面谈..

Web移动端使用localStorage缓存Js和CSS文件

将js css文件缓存到localstorage区可以减少页面在加载时与HTTP请求的交互次数,从而优化页面的加载时间. 电脑端使用localstorage是测试没有问题的,但是用android的apk打包之后,导致localstorage失效,无法进行缓存,查阅资料之后,得知解决方法: 安卓代码: mWebView.getSettings().setDomStorageEnabled(true); mWebView.getSettings().setAppCacheMaxSize(1024*1

web移动端触摸滑动事件

web移动端触摸事件的范例~~~ 注意:1.如果不是内联元素,获取style的属性值前需先赋值~不然为Null. 2.亲测andriod 手机 MX4内置浏览器运行妥妥的~~但是微信浏览器并不支持~原因未找到. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">

Android服务端开发1-使用Eclipse搭建Java Web服务端

本篇博客介绍如何使用Eclipse来创建一个Java Web程序,为后面讲通过Android客户端跟服务端进行交互打下基础,关于服务端可以选用的程序很多,主流的搭配是Android客户端+PHP服务端,我们也可以使用Android客户端+Java EE服务端这样的搭配,就看公司是以哪种方式提供了. 创建一个Java Web程序,没有特别复杂的流程,我们先准备一下原材料: 1. Eclipse(注:这个不是ADT Bundle,最好到官网下载针对开发Java EE的IDE,如果可以的话,选中MyE