搜索文章
web网页开发注意事项适应手机浏览器访问
来源:网地软件 日期:2019年10月20日 查看:1688次

1.网页自适应问题

html {
     font-family: Helvetica, Tahoma, Arial, STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑", SimSun, "宋体", Heiti, "黑体", sans-serif
    -webkit-text-size-adjust: 100%;//取消浏览器字体大小的限制
    font-size: 62.5%;//在不同设备屏幕上字体自适应
}

为什么设置根元素html的font-size:62.5%?

当html使用 font-size: 62.5%;1em则=16px*62.5%=10px,1.2em则=12px,比较简单且精确。

1rem = 62.5%*1em =16px*62.5% =10px; 


(注意:实际开发在不同的移动端设备,1rem不是都等于10px,自适应还是需要真机去测试) 

移动端网页盒子模型css单位使用:rem

结合宽度百分比,自适应感觉会比较好,最外层或者是主要元素的父元素使用width:百分比,如width:80%;

如果有些页面在更小的设备或者更大的设备上自适应不好,可以使用媒体查询@media

(1)@media only screen and (-webkit-min-device-pixel-ratio:2){/*针对iphone4的css样式*/}

(2) iPhone 3 和 iPod(320x480像素的解决方案)
@media only screen and (max-device-width:480px){/*针对iPhone 3和iPod的css样式*/ }

(3)iPhone5

/* iphone5分辨率 */

screen Width = 320px (css像素)

screen Height = 568px (css像素)

screen Width = 640px (实际像素)

screen Height = 1136px (实际像素)

Device-pixel-ratio:2

/* iphone4-iphone4s分辨率 */

screen Width = 320px (css像素)

screen Height = 480px (css像素)

screen Width = 640px (实际像素)

screen Height = 960px

(4)iPad

iPad上要使用device-width而不是max-device-width,并且可以设置横屏和竖屏模式
@media only screen and (device-width:768px){/*针对ipad的css样式*/}

@media only screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait){/*ipad竖屏的css样式*/}

@media only screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:landscape){/*ipad横屏的css样式*/}

 /* 判断ipad */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px){

/* style */

}

/* ipad横屏 */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : landscape){

/* style */

}

/* ipad竖屏 */

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : portrait){

/* style */

}

/* 判断iphone5 *//* 横屏竖屏判断方法与ipad一样 */

@media only screen

and (min-device-width : 320px)

and (max-device-width : 568px){

/* style */

}

/* 判断iphone4-iphone4s *//* 横屏竖屏判断方法与ipad一样 */

@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px){

/* style */

}

2.样式兼容性问题

/*清除苹果手机input的默认样式*/
input,button,textarea { cursor: pointer; -webkit-appearance: none; }

3.苹果手机input/textarea聚焦问题

$(".reply_text")直接使用click事件聚焦没效果,弹不出手机虚拟键盘,解决方法:使用bind绑定点击事件

$(".reply_text").bind("click",function(){           
            $("#input_id").focus();
  })


 

您可能在找
@ 版权所有 2010-2022 ,Inc. All rights reserved 网地软件www.wdiii.com 本站程序界面、源代码受相关法律保护, 未经授权, 严禁使用
手机:135 0777 7790
微信:wdiiics