黑文技术博客,让网络营销,网络推广变得更简单.【专注SEO-UEO技术经验分享,附带案例讲解;为大家答疑解惑,注重用户体验,以营销为核心,做排名就是这么轻松】

四川SEO经验分享【移动页面HTML5自适应手机屏幕宽度】

网站建设 Haven 6441℃ 0评论

如何让手机移动端页面自适应设备宽度,而且禁止页面放大和缩小?网上关于这方面的文章非常大,北京{手机APP}软件开发技术人员仅在这里给大家提供一个思路,剩下的还是实战经验更重要。

wap

 

1、使用meta标签

标签含义如下所述:
<meta name=”viewport” content=”width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”/>

1)、user-scalable=no就一定可以保证页面不可以缩放吗?NO,有些浏览器不吃这一套,还有一招就是minimum-scale=1.0, maximum-scale=1.0 最大与最小缩放比例都设为1.0就可以了。

2)、initial-scale=1.0 初始缩放比例受user-scalable控制吗?不一定,有些浏览器会将user-scalable理解为用户手动缩放,如果user-scalable=no,initial-scale将无法生效。

3)、手机页面可以触摸移动,但是如果有需要禁止此操作,就是页面宽度等于屏幕宽度是页面正好适应屏幕才可以保证页面不能移动。

4)、如果页面是经过缩小适应屏幕宽度的,会出现一个问题,当文本框被激活(获取焦点)时,页面会放大至原来尺寸。

以上是使用viewport标签的一些小体会,北京{手机APP}软件开发技术人员分享给大家,仅供参考。

 

2、百分比法

百分比法概念:CSS中的百分比中的百指的是父元素,所有百分比都是这样的。子元素宽度50%,那么父元素的宽度就是百,子元素的padding-left:50%,父元素的宽度是百,子元素的margin-top:20%,那么父元素的高是百。所以body默认宽度是屏幕宽度(PC中指的是浏览器宽度)子孙元素按百分比定位(或指定尺寸)就可以了,这只适合布局简单的页面,复杂的页面实现很困难。

 

3、使用css3单位rem

rem就是将根节点html的font-size的值作为整个页面的基准尺寸,默认html的font-size是16px,即1rem=16px;如果某div宽度为32px你可以设为2rem。当我们把html的font-size设为20px时,1rem=20px,那么32px=1.6rem了。

到这里我们也就了解了rem的用法了,那么怎么用rem来实现不同尺寸屏幕的自适应呢?

在页面载入开始时首先判断window的宽度(是window的宽度($(window).width()),不是屏幕分辩率的宽度(screen.width),两者的差别请自行查阅),假设宽度为W,一个div在宽度为640px的设计稿的下的宽度为dW1,这样如果html的font-size为100px,那么这个div的宽度用rem表示是多少呢?

计算:div宽度dW2=dW1/100,px与rem之间很好换算,除以100就可以,这是假定屏幕宽度为640的,而不同宽度的屏幕怎么处理,为了能保证换算容易那就要为html设置一个合适的font-size,计算:100 / 640 = fontSize / W, fontSize = W / 640 * 100 = W / 6.4;

解释一下为什么把100作为一个缩放比例,用10或1不是更方便吗,这是因为大多数浏览器font-size的最小值为12px,所以只能用100了。所以会在头部加上这个JS代码

 

<script type="text/javascript">
   var html = document.querySelector(‘html‘);
   var rem = html.offsetWidth / 6.4;
   html.style.fontSize = rem + "px";
</script>

 

4、媒体查询

媒体查询也是css3的方法,媒体查询的功能就是为不同的媒体设置不同的css样式,这里的“媒体”包括页面尺寸,设备屏幕尺寸等,比如我们要为宽度小于480px的页面中的class=”icon”的元素设置样式,可以这样写,@media screen and (max-width=480px) {.icon{ some styles }};这里仅介绍这种思路,关于媒体查询的详细用法请参阅css手册。

 

综上所述,至今为止,黑文暂时还没有找到一种完全适应各种屏幕的方法,我也只能根据页面特点选择一些不同的方法,希望大家能够将各种方法灵活运用,这才是王道哈。共勉……

转载请注明:项目运营+网站运营+软件开发 » 四川SEO经验分享【移动页面HTML5自适应手机屏幕宽度】

喜欢 (34)or分享 (0)
发表我的评论
取消评论
表情