移动端WAP适配笔记

手机网站前端开发教程 linux vim 前端开发环境 前端开发网站负责的任务

1.关于引入图标问题
<link rel=”short icon” style=”image/x-icon” href=”taobaoLogo.ico” >
<link rel=”icon” style=”image/x-icon” href=”taobaoLogo.ico”>
注释:细心的读者可能会问加不加最后一行代码既然效果都是一样的,那么为什么要多此一举呢,其中一般这个Logo图标不但可以运用在标题中,而且还可以放在收藏夹中去使用,只需要将添加标题栏中 rel=”short icon”改为rel=”bookmark”即可
2.在手机网页的制作上,我们一般是不让用户手动的去改变页面的大小的,所以下面的这一句是必须加上的
<meta name=”viewport” content=”width=device-width,initial-scale=1,user-scalable=no”>
3.开启对web app的支持
<meta name=”apple-mobile-web-app-capable” content=”yes” />
4.主要是针对苹果手机将数字自动识别为号码
<meta name=”format-detection” content=”telephone=no” />
5.除此之外,还有其他一些的属性供你自由的选择
<!– 忽略识别邮箱,主要是针对安卓手机会自动将符合邮箱格式的字符串识别为邮箱地址–>
<meta content=”email=no” name=”format-detection” />
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL” />
<!– 添加智能 App 广告条 Smart App Banner:告诉浏览器这个网站对应的app,并在页面上显示下载 banner:https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html
<!– 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 –>
<meta name=”HandheldFriendly” content=”true”>
<!– 微软的老式浏览器 –>
<meta name=”MobileOptimized” content=”320″>
<!– uc强制竖屏 –>
<meta name=”screen-orientation” content=”portrait”>
<!– QQ强制竖屏 –>
<meta name=”x5-orientation” content=”portrait”>
<!– UC强制全屏 –>
<meta name=”full-screen” content=”yes”>
<!– QQ强制全屏 –>
<meta name=”x5-fullscreen” content=”true”>
<!– UC应用模式 –>
<meta name=”browsermode” content=”application”>
<!– QQ应用模式 –>
<meta name=”x5-page-mode” content=”app”>
<!– windows phone 点击无高光 –>
<meta name=”msapplication-tap-highlight” content=”no”>

6.获取滚动条的滚动值
window.scrollY window.scrollX
桌面浏览器中想要获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的,但在iOS中你会发现这两 个属性是未定义的,为什么呢?因为在iOS中没有滚动条的概念,在Android中通过这两个属 性可以正常获取到滚动条的值,那么在iOS中我们该如何获 取滚动条的值呢?就是上面两个属性,但是事实证明android也支持这属性,所以索性都用woindow.scroll.

7.禁止用户选择文本
-webkit-user-select:none 这个属性是禁止用户选择文本,对安卓和苹果都是有效的。

8.手机图片和视频上传
<!– 选择照片 –>
<input type=file accept=”image/“>
<!– 选择视频 –>
<input type=file accept=”video/
“>

9.动画特效开启加速
.div {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
/ Other transform properties here /
}

10.设置placeholder时候 focus时候文字没有隐藏
input:focus::-webkit-input-placeholder{
opacity: 0;
}

11.移动前端适配问题,如今手机屏幕尺寸越来越多,可以考虑在html头部head标签中先插入一个meta标签,在插入一个脚本设置缩放值:
<meta id=”eqMobileViewport” name=”viewport” content=”width=320, initial-scale=1, maximum-scale=1, user-scalable=no”>
<script>
var g = document.documentElement.clientWidth / 320;
document.getElementById(‘eqMobileViewport’).setAttribute(“content”, “width=320, initial-scale=” + g + “, maximum-scale=” + g + “, user-scalable=no”)
</script>

flex 前端开发环境搭建 web前端开发主流网站 网站开发后台前端数据库

» 本文来自:前端开发者 » 《移动端WAP适配笔记》
» 本文链接地址:https://www.rokub.com/5443.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!