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允许用户缩放的最小比例,user-scalable是否允许用户缩放。--><meta name="apple-mobile-web-app-capable" content="yes" /><!-- 设置Web应用是否以全屏模式运行。删除默认的苹果工具栏和菜单栏。如果content设置为yes,Web应用会以全屏模式运行,反之,则不会。content的默认值是no,表示正常显示。 --><meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 控制状态栏显示样式。设置为blank-translucent,则状态栏显示为黑色半透明。--><meta name="format-detection" content="telephone=no" /><!-- 禁止ios把数字转化为拨号链接 -->

 

2、屏蔽ios点击元素时出现的阴影

-webkit-tap-highlight-color:rgba(255,255,255,0);

 

3、ios 设置input 按钮样式会被默认样式覆盖

input,textarea {border: 0; -webkit-appearance: none; 
}

 

4、长度单位用rem 

1rem = 16px;
html { <!-- 根元素 -->font-size:62.5%; } p {font-size:1rem; <!-- 字体大小等于 = 10px 16px*62.5% = 10px--> }

 

5、多用text-shadow这个属性,可以美化文字效果

   border-radius、box-shadow、gradient、border-image,在移动端都可以很好的支持,使用这些属性可以实现很炫丽的按钮。

 

6、iOS中禁止用户保存图片、复制图片

  img标签指定 -webkit-touch-callout:none; 可以禁止设备弹出列表按钮,这样用户就无法保存/复制你的图片。

 

7、禁止用户进行复制, 选择

  使用 -webkit-user-select: none;  user-select:none;

 

8、html5调用安卓或者ios的拨号功能

  html5提供了自动调用拨号的标签,只要在a标签的href中添加tel:就可以了。

  如下:

  <a href="tel:4008106999,1034">400-810-6999 转 1034</a>

  拨打手机直接如下

  <a href="tel:15677776767">点击拨打15677776767</a>

 

9、长时间按住页面出现闪退

element {-webkit-touch-callout:none;
}

  

10、设置缓存

  手机页面通常在第一次加载后会进行缓存,然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。

<meta http-equiv="Cache-Control" content="no-cache"/>

 

11、IOS键盘字母输入,默认首字母大写

  解决方案,设置如下属性

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

  

12、关于 iOS 系统中,中文输入法输入英文时,字母之间可能会出现一个六分之一空格

  可以通过正则去掉

this.value = this.value.replace(/\u2006/g,'');

 

13、点击事件

  click 和 tap 比较两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms的延迟,所以请用tap代替click作为点击事件。

 

 

 

待续~~

转载于:https://www.cnblogs.com/chenglu/p/7517882.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/487580.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

追踪“MATLAB被禁”:我们如何做出卡别人脖子的软件?

作者 | 包云岗&#xff08;中国科学院计算技术研究所研究员&#xff09;编辑 | 宗华排版 | 华园导 读最近&#xff0c;哈工大、哈工程被禁用工科神器Matlab一事引发持续讨论。6月19日&#xff0c;中科院计算所研究员包云岗在微博上分享了他在“CCF YOCSEF杭州Matlab被禁之特别…

oracle 截取小数点_处理小数点位数的Oracle函数

Oracle函数可以实现许多的功能&#xff0c;下面为您介绍的Oracle函数用于处理小数点位数&#xff0c;如果您对Oracle函数数据库感兴趣的话&#xff0c;不妨一看。关于处理小数点位数的几个oracle函数()&#xff1a;1. 取四舍五入的几位小数select round(1.2345, 3) from dual;结…

拿下赌场新客户,但马斯克“超级隧道”何时才能颠覆地面交通?

来源&#xff1a;脑极体埃隆马斯克那家非常“Boring”的隧道公司&#xff0c;最近生意又热络了起来。据媒体报道&#xff0c;在5月份完成美国拉斯维加斯会议中心的两条地下隧道之后&#xff0c;埃隆马斯克的隧道公司&#xff08;Boring Company&#xff09;又接到了当地两家大型…

NOIP2016天天爱跑步 题解报告【lca+树上统计(桶)】

题目描述 小c同学认为跑步非常有趣,于是决定制作一款叫做《天天爱跑步》的游戏。天天爱跑步是一个养成类游戏,需要玩家每天按时上线,完成打卡任务。 这个游戏的地图可以看作一一棵包含 nn个结点和 n-1n−1条边的树, 每条边连接两个结点,且任意两个结点存在一条路径互相可达。树…

人工智能发展简史

文章来源&#xff1a;人工智能和大数据 &#xff08;ID&#xff1a;AIANDBIGDATA&#xff09;人工智能是在1956年作为一门新兴学科的名称正式提出的&#xff0c;自此之后&#xff0c;它已经取得了惊人的成就&#xff0c;获得了迅速的发展&#xff0c;它的发展历史&#xff0c;可…

程序媛计划——python数据库

#实例&#xff1a;用数据库存储日记&#xff0c;实现日记本功能 #流程 #创建数据库 1 #coding:utf-8 2 import sqlite3 3 connectsqlite3.connect(test.db) 4 connect.close() #效果 #用sqlite3模块对数据库进行操作 1 #coding:utf-82 import sqlite33 #创建数据库4 connectsql…

国产半导体路在何方,瓦森纳与光刻机你了解多少

来源&#xff1a;PConline光刻机&#xff08;Mask Aligner&#xff09;是制造微机电、光电、二极体大规模集成电路的重要设备。一台光刻机主要包括了曝光系统和对准系统两个部分。光刻机能够利用曝光系统发射出的紫外线通过模版去除晶圆表面的保护膜&#xff0c;将器件或电路结…

linux实验总结及心得_安全实验室 | 内网渗透—Linux权限维持技巧总结

在上一篇文章中我们介绍了内网渗透中Windows环境下进行权限维持(点击阅读)的方式&#xff0c;本期我们将视角集中在Linux系统中继续对内网渗透中的权限维持方式进行探索。Linux也是在内网渗透中很常见的操作系统&#xff0c;但是其内部实现方式却与Windows有着本质的区别。我们…

特殊乘法(字符串循环的结束标志)

#include<iostream>using namespace std;int main(){ char s1[11]; char s2[11]; while (cin >> s1 >> s2) { int ans 0; for (int i 0; s1[i] ! 0; i) //字符串判断标志 { for (int j 0; s2[j] ! 0; j) { ans (s1[i] - 0)*(s2[j] - 0); } } cout <&l…

深度学习模型并非“越大越好”,它可能引起气候变化问题

来源丨Forbes作者丨Rob Toews编译丨科技行者和当今的深度学习方法相比&#xff0c;我们大脑的效率高得不可思议。它们只有几磅重&#xff0c;大概只需要20瓦左右的能量消耗&#xff0c;这个能耗只能够给昏暗的灯泡供电。然而&#xff0c;它们代表了已知宇宙中最强大的智力形式。…

python 声音基频f0_音高和基频(Pitch and F0)

音高(Pitch)和基频(F0)是两个非常接近的概念&#xff0c;尽管它们有所不同&#xff0c;但通常并不区分。音高和基频的关系最早在音乐界被发现&#xff0c;通常认为&#xff0c;音高增高八度音程相当于基频翻倍。在1000Hz以下&#xff0c;基频翻倍略小于音高的八度音程&#xff…

datagrid 完整dom结构

<!-- datagrid的最外层容器&#xff0c;可以使用$(target).datagrid(getPanel)或者$.data(target,datagrid).panel得到这个DOM对象&#xff0c;这个DOM上其实承载了panel组件--> <div class"panel datagrid"> <!-- datagrid的标题区域容器&…

dismiss ios pop效果_iOS 动画框架pop使用方法

pop支持4种动画类型&#xff1a;弹簧动画效果、衰减动画效果、基本动画效果和自定义动画效果。弹簧动画效果1.效果图如下:2.控制器代码如下,首先用pod安装导入pop框架:#import "ViewController.h"#import interface ViewController ()endimplementation ViewControll…

万亿新基建,AI“芯”机遇在哪?| CCF-GAIR 2020

新基建中的5G、AI和智能计算等新一代高端芯片属于新赛道&#xff0c;需要构建全新生态。”来源&#xff1a;雷锋网自今年3月份提出&#xff0c;新基建就迅速成为了焦点。新基建涵盖5G基建、特高压、大数据中心、人工智能、工业互联网等七大领域。与以往基础设施建设的“铁公基”…

LINUX下统计代码行数

http://blog.csdn.net/simanstar/article/details/9106997转载于:https://www.cnblogs.com/spectrelb/p/7542731.html

重磅!库克官宣苹果放弃英特尔,全面采用自研芯片,MAC迎来历史转折点

物联网智库 整理发布转载请注明来源和出处导 读苹果并没有完全放弃Intel平台的Mac&#xff0c;未来还会继续推出Intel版的Mac&#xff0c;两种平台会并行发展。不过&#xff0c;随着苹果陆续将英特尔处理器换成自研ARM芯片&#xff0c;两年过渡期后的苹果仍启用英特尔处理器的…

vlc 缓冲大小 设置_用libvlc 播放指定缓冲区中的视频流

//vlcTest.cpp : 定义控制台应用程序的入口点。//#include"stdafx.h"#include#include"vlc/vlc.h"#include#include#include#includeQMutex g_mutex;bool g_isInit false;int IMG_WIDTH 640;int IMG_HEIGHT 480;char in_buffer[640*480*4];char out_buf…

微信小程序开源Demo精选

来自&#xff1a;http://www.jianshu.com/p/0ecf5aba79e1 文&#xff0f;weapphome&#xff08;简书作者&#xff09; 原文链接&#xff1a;http://www.jianshu.com/p/0ecf5aba79e1 著作权归作者所有&#xff0c;转载请联系作者获得授权&#xff0c;并标注“简书作者”。 1. 仿…

mac mysql的初始密码_MAC版修改MySQL初始密码的方法

解决方式&#xff1a;亲测方法3&#xff0c;已成功重置密码。step1&#xff1a;cd /usr/local/mysql/bin/苹果->系统偏好设置->最下边点mysql 在弹出页面中 关闭mysql服务(点击stop mysql server)step2&#xff1a;cd /usr/local/mysql/bin/回车后 登录管理员权限sudo su…

不输GPS!30颗卫星全部就位!北斗三号全球卫星导航星座部署顺利收官

随着此次发射的成功&#xff0c;北斗三号30颗组网卫星已全部到位&#xff0c;北斗三号全球卫星导航系统星座部署全面完成。来源&#xff1a;澎湃新闻视频&#xff1a;多角度直击北斗三号全球系统“收官之星”发射瞬间&#xff0c;时长约1分12秒6月23日&#xff0c;由中国航天科…