请选择 进入手机版 | 继续访问电脑版

10模板

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 493|回复: 0

移动端h5开发总结不断

[复制链接]

1325

主题

1840

帖子

4781

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
4781
发表于 2017-5-4 17:13:59 | 显示全部楼层 |阅读模式
一.手机端开发页面必须要加一段代码:
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
     注:这段代码的主要意思是:让页面宽度等于设备宽度,缩放比例为1,禁止用户缩放。用于检测视口,主要的效果就是取消下面的滚动条,让页面适应屏幕。

二.为自己的页面设置最大宽度和最小宽度:
     {
         max-width:640px;
         min-width:320px;
     }
     主要作用是在屏幕足够大的时候,页面也不会失真。

三.兼容手机屏幕大小不同的情况:
      window.onload=window.onresize=function(){
             document.documentElement.style.fontSize = document.documentElement.clientWidth*40/640+'px';
      };
      在写移动端页面的时候要加上这一段代码,这段代码意思是:让视口或者说页面的可见宽度与根元素的字符大小产生对应关系,例如上面这段代码意思是在视口宽度为640px的时候,让根元素的字符大        小为40px(也就是1rem等于40px),这样在视口不断变化的时候,根元素的字符大小也会不断变化,而且有固定的系数(1/16),这样就产生了对应关系,也就是兼容了不同屏幕大小不一样的情况。
具体用法:引用上述js代码,在设计图640px的情况下测量距离,然后在把距离除以40,并把px为rem,这样就可以了,注:js里的40和640可以根据需要灵活更改,但要注意字符默认情况下最小为12px且widow.onload在只能出现一次。

                        
四.去掉 a,input 在移动端浏览器中的默认样式
    1.禁止 a 标签背景
        在移动端使用 a标签做按钮的时候,点按会出现一个“暗色”的背景,去掉该背景的方法如下:
        a,button,input,optgroup,select,textarea {
           -webkit-tap-highlight-color:rgba(0,0,0,0);
         }
    2.禁止长按 a,img 标签长按出现菜单栏
        使用 a标签的时候,移动端长按会出现一个 菜单栏,这个时候禁止呼出菜单栏的方法如下
        a, img {
           -webkit-touch-callout: none;
         }
    3.流畅滚动
        body{
         -webkit-overflow-scrolling:touch;
        }

清除ios的原生按钮样式
-webkit-appearance:none;appearance:none;outline:none;
asdsadsa
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|10模板  

GMT+8, 2018-7-20 05:18 , Processed in 0.277674 second(s), 30 queries .

快速回复 返回顶部 返回列表