微动网站建设,桂林象鼻山作文400字,怎么做虚拟网站,楼盘网站设计整理web移动端开发经验#xff0c;部分内容借鉴于网上的博文。 1、meta标签 meta nameviewport contentwidthdevice-width,initial-scale1.0,maximum-scale1.0,user-scalable0; /!-- width可视宽度#xff0c;initial-scale初始化缩放比…整理web移动端开发经验部分内容借鉴于网上的博文。 1、meta标签 meta nameviewport contentwidthdevice-width,initial-scale1.0,maximum-scale1.0,user-scalable0; /!-- width可视宽度initial-scale初始化缩放比例maximum-scale允许用户缩放的最大比例minimum-scale允许用户缩放的最小比例user-scalable是否允许用户缩放。--meta nameapple-mobile-web-app-capable contentyes /!-- 设置Web应用是否以全屏模式运行。删除默认的苹果工具栏和菜单栏。如果content设置为yesWeb应用会以全屏模式运行反之则不会。content的默认值是no表示正常显示。 --meta nameapple-mobile-web-app-status-bar-style contentblack /!-- 控制状态栏显示样式。设置为blank-translucent则状态栏显示为黑色半透明。--meta nameformat-detection contenttelephoneno /!-- 禁止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 hreftel:4008106999,1034400-810-6999 转 1034/a 拨打手机直接如下 a hreftel:15677776767点击拨打15677776767/a 9、长时间按住页面出现闪退 element {-webkit-touch-callout:none;
}10、设置缓存 手机页面通常在第一次加载后会进行缓存然后每次刷新会使用缓存而不是去重新向服务器发送请求。如果不希望使用缓存可以设置no-cache。 meta http-equivCache-Control contentno-cache/ 11、IOS键盘字母输入默认首字母大写 解决方案设置如下属性 input typetext autocapitalizeoff/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
