手机网站注意事项和总结 手机网站概述
bigegpt 2024-10-12 06:28 4 浏览
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的例子:
<li><canvas></canvas></li>
s动态加载图片和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 +=''''<li style="width:''''+picWidth+''''px;height:''''+picWidth+''''px;padding-left:''''+p+''''px;padding-top:''''+padding+''''px;"><canvas id="cvs_''''+i+''''"></canvas></li>'''';
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
还有就是,有些手机网站我们看到如下声明:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
设置了DTD的方式是XHTML的写法,假如我们页面运用的是html5,可以不用设置DTD,直接声明<!DOCTYPE html>。
使用viewport使页面禁止缩放。 通常把user-scalable设置为0来关闭用户对页面视图缩放的行为。
<meta name="viewport" content="user-scalable=0" />
但是为了更好的兼容,我们会使用完整的viewport设置。
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
当然,user-scalable=0,有的人也写成user-scalable=no,都可以的。
5、apple-mobile-web-app-capable
apple-mobile-web-app-capable是设置Web应用是否以全屏模式运行。
语法:
<meta name="apple-mobile-web-app-capable" content="yes">
说明:
如果content设置为yes,Web应用会以全屏模式运行,反之,则不会。content的默认值是no,表示正常显示。你可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示。
兼容性:
iOS 2.1 +
6、format-detection
format-detection 启动或禁用自动识别页面中的电话号码。
语法:
<meta name="format-detection" content="telephone=no">
说明:
默认情况下,设备会自动识别任何可能是电话号码的字符串。设置telephone=no可以禁用这项功能。
兼容性
iOS 1.0 +
7、html5调用安卓或者ios的拨号功能
html5提供了自动调用拨号的标签,只要在a标签的href中添加tel:就可以了。
如下:
<a href="tel:4008106999,1034">400-810-6999 转 1034</a>
拨打手机直接如下
<a href="tel:15677776767">点击拨打15677776767</a>
8、html5GPS定位功能
具体请看:http://www.sj520.cn/listdetail/1/8227/2290.html(HTML5中GPS定位之getCurrentPosition)
9、上下拉动滚动条时卡顿、慢
body { -webkit-overflow-scrolling: touch; overflow-scrolling: touch; }
Android3+和iOS5+支持CSS3的新属性为overflow-scrolling
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下输入框默认内阴影(iPhone尺寸)
Element{ -webkit-appearance: none; }
13、ios和android下触摸元素时出现半透明灰色遮罩
Element { -webkit-tap-highlight-color:rgba(255,255,255,0) }
设置alpha值为0就可以去除半透明灰色遮罩,备注:transparent的属性值在android下无效。
后面一篇文章有详细介绍,手机网站点击链接触发颜色块的问题解决:地址:http://www.sj520.cn/listdetail/1/8227/2291.html
14、active兼容处理 即 伪类 :active 失效
方法一:body添加ontouchstart
<body ontouchstart="">
方法二:js给 document 绑定 touchstart 或 touchend 事件
<style> a { color: #000; } a:active { color: #fff; } </style> <a herf=foo >bar</a> <script> document.addEventListener(''''touchstart'''',function(){},false); </script>
15、动画定义3D启用硬件加速
Element { -webkit-transform:translate3d(0, 0, 0) transform: translate3d(0, 0, 0); }
注意:3D变形会消耗更多的内存与功耗
16、Retina屏的1px边框
Element{ border-width: thin; }
17、webkit mask 兼容处理
某些低端手机不支持css3 mask,可以选择性的降级处理。
比如可以使用js判断来引用不同class:
if( ''''WebkitMask'''' in document.documentElement.style){ alert(''''支持mask''''); } else { alert(''''不支持mask''''); }
18、旋转屏幕时,字体大小调整的问题
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 { -webkit-text-size-adjust:100%; }
19、transition闪屏
/设置内嵌的元素在 3D 空间如何呈现:保留3D /
-webkit-transform-style: preserve-3d;
/ 设置进行转换的元素的背面在面对用户时是否可见:隐藏 /
-webkit-backface-visibility:hidden;
20、圆角bug
某些Android手机圆角失效
background-clip: padding-box;
21、顶部状态栏背景色
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
说明:
除非你先使用apple-mobile-web-app-capable指定全屏模式,否则这个meta标签不会起任何作用。
如果content设置为default,则状态栏正常显示。如果设置为blank,则状态栏会有一个黑色的背景。如果设置为blank-translucent,则状态栏显示为黑色半透明。如果设置为default或blank,则页面显示在状态栏的下方,即状态栏占据上方部分,页面占据下方部分,二者没有遮挡对方或被遮挡。如果设置为blank-translucent,则页面会充满屏幕,其中页面顶部会被状态栏遮盖住(会覆盖页面20px高度,而iphone4和itouch4的Retina屏幕为40px)。默认值是default。
兼容性 iOS 2.1 +
22、设置缓存
<meta http-equiv="Cache-Control" content="no-cache" />
手机页面通常在第一次加载后会进行缓存,然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。
23、桌面图标
<link rel="apple-touch-icon" href="touch-icon-iphone.png" /> <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png" /> <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png" /> <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png" />
iOS下针对不同设备定义不同的桌面图标。如果不定义则以当前屏幕截图作为图标。
上面的写法可能大家会觉得会有默认光泽,下面这种设置方法可以去掉光泽效果,还原设计图的效果!
<link rel="apple-touch-icon-precomposed" href="touch-icon-iphone.png" />
图片尺寸可以设定为5757(px)或者Retina可以定为114114(px),ipad尺寸为72*72(px)
24、启动画面
<link rel="apple-touch-startup-image" href="start.png"/>
iOS下页面启动加载时显示的画面图片,避免加载时的白屏。
可以通过madia来指定不同的大小:
<!--iPhone--> <link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" /> <!-- iPhone Retina --> <link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> <!-- iPhone 5 --> <link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png"> <!-- iPad portrait --> <link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" /> <!-- iPad landscape --> <link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" /> <!-- iPad Retina portrait --> <link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> <!-- iPad Retina landscape --> <link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" />
25、浏览器私有及其它meta
以下属性在项目中没有应用过,可以写一个demo测试以下!
QQ浏览器私有
全屏模式
<meta name="x5-fullscreen" content="true">
强制竖屏
<meta name="x5-orientation" content="portrait">
强制横屏
<meta name="x5-orientation" content="landscape">
应用模式
<meta name="x5-page-mode" content="app">
UC浏览器私有
全屏模式
<meta name="full-screen" content="yes">
强制竖屏
<meta name="screen-orientation" content="portrait">
强制横屏
<meta name="screen-orientation" content="landscape">
应用模式
<meta name="browsermode" content="application">
其它
针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓
<meta name="HandheldFriendly" content="true">
微软的老式浏览器
<meta name="MobileOptimized" content="320">
windows phone 点击无高光
<meta name="msapplication-tap-highlight" content="no">
26、 IOS中input键盘事件keyup、keydown、keypress支持不是很好
问题是这样的,用input search做模糊搜索的时候,在键盘里面输入关键词,会通过ajax后台查询,然后返回数据,然后再对返回的数据进行关键词标红。用input监听键盘keyup事件,在安卓手机浏览器中是可以的,但是在ios手机浏览器中变红很慢,用输入法输入之后,并未立刻相应keyup事件,只有在通过删除之后才能相应!
解决办法:
可以用html5的oninput事件去代替keyup
<input type="text" id="testInput"> <script type="text/javascript"> document.getElementById(''''testInput'''').addEventListener(''''input'''', function(e){ var value = e.target.value; }); </script>
然后就达到类似keyup的效果!
相关推荐
- Redis集群对比:主从复制、哨兵模式、Cluster一文看懂所有优缺点
-
在分布式系统中,Redis作为高性能的内存数据库,其集群方案的选择直接影响到系统的稳定性、可用性和扩展性。本文将全面对比Redis的三种主流集群方案:主从复制、哨兵模式和Cluster模式,帮助开发者...
- redis的主从复制,读写分离,主从切换
-
当数据量变得庞大的时候,读写分离还是很有必要的。同时避免一个redis服务宕机,导致应用宕机的情况,我们启用sentinel(哨兵)服务,实现主从切换的功能。redis提供了一个master,多个sl...
- # Redis 入门到精通(九)-- 主从复制(3)
-
#Redis入门到精通(九)--主从复制(3)##一、redis主从复制-常见问题(1)###1、伴随着redis系统的运行,master的数据量会越来越大,一旦master重启...
- redis - 主从复制(Redis主从复制时序图)
-
1引言在上一篇文章中,我们了解了Redis两种不同的持久化方式,Redis服务器通过持久化,把Redis内存中持久化到硬盘当中,当Redis宕机时,我们重启Redis服务器时,可以由RDB文件或AO...
- # Redis 入门到精通(九)-- 主从复制(2)
-
#Redis入门到精通(九)--主从复制(2)##一、redis主从复制--数据同步阶段注意事项###1、数据同步阶段master说明1)如果master数据量巨大,数据同步阶段应...
- Redis主从复制(redis主从复制主节点挂了)
-
介绍Redis有两种不同的持久化方式,Redis服务器通过持久化,把Redis内存中持久化到硬盘当中,当Redis宕机时,我们重启Redis服务器时,可以由RDB文件或AOF文件恢复内存中的数据。不过...
- 深入解析 Redis 集群的主从复制实现方式
-
在互联网大厂的后端开发领域,Redis作为一款高性能的内存数据库,被广泛应用于缓存、消息队列等场景。而Redis集群中的主从复制机制,更是保障数据安全、实现读写分离以及提升系统性能的关键所在。今...
- Redis主从架构详解(redis主从架构高可用如何实现)
-
Redis主从架构搭建Redis主节点配置创建主节点目录(/opt/redis-master),复制redis.conf到该目录下,redis.conf配置项修改#后台启动daemonizeyes...
- 抖音“四大包塘战神”:承包了全网的快乐
-
在抖音钓鱼垂类领域,"包塘战神"军团正掀起一场黑色幽默风暴。空军华、大表坑、李赔光、透心良四位创作者,以承包鱼塘为舞台,用连续翻车的钓鱼直播构筑起流量奇观。当钓鱼佬在抖音集体转型喜剧人...
- ORACLE 11G RAC 安装-通过VM配置共享磁盘
-
简介:在自己的电脑上通过VM软件搭建Oracle11GRAC,通过修改VM的参数文件来实现磁盘共享!目标:搭建RAC环境实现:使用VMwareWorkstation8.0.0+ORACLE...
- Linux操作系统安全配置(linux系统安全配置包括)
-
一、服务相关命令systemctlenable服务名#开机自启动systemctldisable服务名#禁用开机自启动systemctlstop服务名#停止服务systemctls...
- 关于Linux性能调优中网络I/O的一些笔记
-
写在前面和小伙伴分享一些Linux网络优化的笔记,内容很浅,可以用作入门博文内容结合《Linux性能优化》读书笔记整理涉及内容包括常用的优化工具(mii-tool,ethtool,ifconfig,i...
- 从 Sonatype Nexus Repository Manager 迁移到 Artifactory
-
1.Nexus1.1下载下载链接:https://help.sonatype.com/repomanager3/product-information/download/download-archiv...
- Ubuntu20安装zabbix5.0企业监控系统亲测教程
-
前言示例主机:zabbix10.0.100.10,将安装在UbuntuServer上教程说明:因使用官方教程无法安装成功,所以本教程与官方教程有所不同安装前提:已安装UbuntuServer2...
- Linux内核设计与实现—进程管理(linux内核程序设计)
-
进程进程就是处于执行期的程序(目标码存放在某种存储介质上)。进并不仅仅局限于一段可执行程序代码(Unix称其为代码段,textsection)。通常进程还要包含其他资源,像打开的文件,挂起的信号,...
- 一周热门
- 最近发表
- 标签列表
-
- mybatiscollection (79)
- mqtt服务器 (88)
- keyerror (78)
- c#map (65)
- xftp6 (83)
- bt搜索 (75)
- c#var (76)
- xcode-select (66)
- mysql授权 (74)
- 下载测试 (70)
- linuxlink (65)
- pythonwget (67)
- androidinclude (65)
- libcrypto.so (74)
- linux安装minio (74)
- ubuntuunzip (67)
- vscode使用技巧 (83)
- secure-file-priv (67)
- vue阻止冒泡 (67)
- jquery跨域 (68)
- php写入文件 (73)
- kafkatools (66)
- mysql导出数据库 (66)
- jquery鼠标移入移出 (71)
- 取小数点后两位的函数 (73)