android H5开发出现广告,常见的移动端H5页面开发遇到的坑和解决办法
转自:https://www.cnblogs.com/LiuJL/p/7744473.html
1、安卓浏览器看背景图片,有些设备会模糊。
用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢?
经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网页,这样字会非常小,所以苹果当初就把iPhone 4的960640分辨率,在网页里只显示了480320,这样devicePixelRatio=2。现在android比较乱,有1.5的,有2的也有3的。
想让图片在手机里显示更为清晰,必须使用2x的背景图来代替img标签(一般情况都是用2倍)。例如一个div的宽高是100100,背景图必须得200200,然后background-size:contain;,这样显示出来的图片就比较清晰了。
代码如下:
background:url(../images/icon/all.png) no-repeat center center;
-webkit-background-size:50px 50px;
background-size: 50px 50px;display:inline-block; width:100%; height:50px;
或者指定 background-size:contain;都可以,大家试试!
2、图片加载
若您遇到图片加载很慢的问题,对这种情况,手机开发一般用canvas方法加载:
具体的canvas API 参见:http://javascript.ruanyifeng.com/htmlapi/canvas.html
下面举例说明一个canvas的例子:
js动态加载图片和li 总共举例17张图片!
var total=17;
var zWin=$(window);
var render=function(){
var padding=2;
var winWidth=zWin.width();
var picWidth=Math.floor((winWidth-padding*3)/4);
var tmpl ='';
for (var i=1;i<=totla;i++){
var p=padding;
var imgSrc='img/'+i+'.jpg';
if(i%4==1){
p=0;
}
tmpl +='
';
var imageObj = new Image();
imageObj.index = i;
imageObj.onload = function(){
var cvs =$('#cvs_'+this.index)[0].getContext('2d');
cvs.width = this.width;
cvs.height=this.height;
cvs.drawImage(this,0,0);
}
imageObj.src=imgSrc;
}
}
render();
3、假如手机网站不用兼容IE浏览器,一般我们会使用zeptojs。
zeptojs内置Touch events方法,具体可以看http://zeptojs.com/#Touch events
看了一下zeptio新版的API,已经支持IE10以上浏览器,对zeptojs可以选择使用!
4、防止手机中网页放大和缩小。
这点是最基本的,最为手机网站开发者来说应该都知道的,就是设置meta中的viewport
还有就是,有些手机网站我们看到如下声明:
设置了DTD的方式是XHTML的写法,假如我们页面运用的是html5,可以不用设置DTD,直接声明。
使用viewport使页面禁止缩放。 通常把user-scalable设置为0来关闭用户对页面视图缩放的行为
但是为了更好的兼容,我们会使用完整的viewport设置。
当然,user-scalable=0,有的人也写成user-scalable=no,都可以的。
5、apple-mobile-web-app-capable
apple-mobile-web-app-capable是设置Web应用是否以全屏模式运行。
语法:
说明:
如果content设置为yes,Web应用会以全屏模式运行,反之,则不会。content的默认值是no,表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。
6、format-detection
format-detection 启动或禁用自动识别页面中的电话号码。
语法:
说明:
默认情况下,设备会自动识别任何可能是电话号码的字符串。设置telephone=no可以禁用这项功能。
7、html5调用安卓或者ios的拨号功能
html5提供了自动调用拨号的标签,只要在a标签的href中添加tel:就可以了。
如下:10010
8、html5GPS定位功能 具体请看:http://www.w3school.com.cn/html5/html_5_geolocation.asp
9、上下拉动滚动条时卡顿、慢
body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
10、禁止复制、选中文本
Element {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
解决移动设备可选中页面文本(视产品需要而定)
11、长时间按住页面出现闪退
element {
-webkit-touch-callout: none;
}
12、iphone及ipad下输入框默认内阴影
Element{
-webkit-appearance: none;
}
13、ios和android下触摸元素时出现半透明灰色遮罩
Element {
-webkit-tap-highlight-color:rgba(255,255,255,0)
}
https://blog.csdn.net/weixin_30235225/article/details/96247334?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-5&spm=1001.2101.3001.4242
android H5开发出现广告,常见的移动端H5页面开发遇到的坑和解决办法相关推荐
- 如何进行移动端的页面开发?
如何进行移动端的页面开发 应该说,移动端的开发是伴随着HTML5的兴起而出现的,2007年第一款iPhone诞生,2009年HTML5这个名词第一次登上"舞台".当时的移动互联网开 ...
- Android Stduio 发生 Process ‘command ‘somePath:java.exe‘‘ finished with non-zero exit value 2 异常的解决办法
Android Stduio 发生 Process 'command 'somePath:java.exe'' finished with non-zero exit value 2 异常的解决办法 ...
- android studio创建项目一直,Android Studio在创建/导入项目的时候,一直处于building “XXX”gradle project info的解决办法...
Android Studio在新建项目或者导入项目的时候,可能会一直处于building "XXX"gradle project info的状态,而且还取消不了,无奈之下只能干掉进 ...
- vue多页面开发_使用VUE进行移动端H5页面开发前准备
在正式使用Vue进行移动端页面开发前,需要做一些前置工作,以此保证用户在访问页面时看到的东西不会因设备的差异而出现各种不同的效果,比如一个页面在iphone7 plus上显示的很正常,然后切换到了Ip ...
- 总结40条常见的移动端Web页面问题及解决方案
前言 工作中接手做过一些移动端的项目,在开发过程中,发现了一些问题,结合网友的一些经验总结,整理下移动端常见的问题,这是在前一篇基础上,整理网友的经验,希望对大家有用. 1.安卓浏览器看背景图片,有些 ...
- 移动端web页面开发
移动端页面开发资源总结 2015.10.10 10:56 16453浏览 字号 工作了有一段时间,基本上都在搞移动端的前端开发,工作的过程中遇到过很多问题,bug的解决方案,记录下来,以便后用!!!内 ...
- android虚拟器没有菜单,网易MuMu模拟器不显示Menu(菜单)键的解决办法
解决方法一: 前提:需要一个键盘 步骤: 1.直接按下键盘上的Menu键. 解决方法二: 前提:需要Root之后的文件浏览器 步骤: 1.在文件管理器中打开 /System 文件夹: 2.复制 bui ...
- android安卓手机(小米 MI3联通版)安装Ubuntu(Linux发行版)过程遇到的坑以及解决办法。
原创博客,转载请注明出处,欢迎转载. 以下是我用闲置的旧手机小米3联通版根据网上教程安装Ubuntu过程,以及各种问题的解决办法: (请直接跳到第三步:使用Linux Deploy安装ubuntu) ...
- 手机屏幕常见故障_手机屏幕失灵怎么回事 手机屏幕失灵解决办法
如今我们基本上都使用触屏手机了,市面上也很少有按键手机卖了.不得不说,触屏手机真的是极大的方便了我们使用手机的效率,大屏幕也使得我们在使用手机的时候更加的享受.触屏手机虽然有着许多的优点,但也有自己一 ...
最新文章
- partprobe源码分析
- 编程新手真言:不要去干追逐技术的蠢事,你只是用户,只需学会一门工具开发....
- xshell突然连接不上虚拟机解决办法
- vsCode ext install 不工作
- 联想电脑如何添加无线网络连接服务器,安装英特尔MYWIFI的操作步骤
- vmwaretools安装
- list ajax封装,util-pagelist_基于layui封装的ajax分页列表
- STM32----重温ADC测量电压值
- Python扩展库numpy中的布尔运算
- 计算机系统组成导学案,单元一任务2认识计算机系统的组成导学案.pdf
- 抖音python上的代码_抖音代码舞python实例代码
- es运维常用基本命令记录。
- 手游方舟重启维护服务器要多久,方舟生存进化手游日常维护多久
- 第五节:通信之WLAN(MAC地址)
- “菜鸟”程序员和“大神”程序员的差别竟然这么大...
- 本次给大家来个简单的一元二次方程求解的编程
- 蓝牙体脂秤模块方案简述
- ipmitool使用手册
- 计算机技术复试面试英语自我介绍,计算机复试英语自我介绍
- 靠着这Java面试210题,成功拿下了10多家国内知名大厂Offer,10万字精华全部分享给大家
热门文章
- 闭环控制和PID在闭环控制中的作用以及程序编写
- 域名之父—蔡文胜 (下篇)
- 川师大计算机专业好就业吗,四川师范大学好就业吗?附四川师范大学就业率最高的专业名单...
- ios swift view父视图(半)透明,子视图不透明
- 【无人机】【2017.06】无人机应用于风力涡轮转子叶片超声无损检测的可行性研究
- 功能强大的离线浏览器(1)
- vs2015 或其他版本 一键卸载所有组件工具,彻底卸载干净
- 安卓开发培训!一次违反常规的安卓大厂面试经历,实战解析
- 四节传送带plc梯形图_基于PLC的四节传送带设计.ppt
- 正则表达式二:正则表达式元字符