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

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

网站建设 Haven 6709℃ 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)

您必须 登录 才能发表评论!

(22)个小伙伴在吐槽
  1. Thanks.
    匿名2019-01-07 04:59
  2. Thanks
    匿名2019-01-21 11:21
  3. Some truly interesting information, well written and loosely user friendly.
    匿名2019-02-18 18:58
  4. As I website owner I believe the content material here is rattling superb, appreciate it for your efforts.
    匿名2019-02-20 20:51
  5. Great post, you have pointed out some great points, I besides conceive this is a very good website.
    匿名2019-02-21 19:36
  6. I adore foregathering utile info, this post has got me even more info!
    匿名2019-02-22 13:01
  7. great post, very informative. I'm wondering why the other specialists of this sector do not understand this. You should continue your writing. I am confident, you've a great readers' base already!
    匿名2019-02-23 16:55
  8. Thank you for the auspicious writeup. It if truth be told used to be a enjoyment account it. Look advanced to more added agreeable from you! By the way, how could we be in contact?
    匿名2019-02-25 18:43
  9. well done
    匿名2019-03-10 01:54
  10. tnx
    匿名2019-03-10 23:26
  11. I wanted to post you this very little note to be able to say thanks again for your pleasant tactics you have shown here. This has been so unbelievably generous of people like you to make unhampered what exactly many of us would've advertised as an e book to get some profit for themselves, and in particular given that you might have done it in the event you decided. Those solutions likewise worked like a good way to know that some people have the same eagerness just like my own to figure out way more concerning this issue. I think there are a lot more pleasurable opportunities in the future for those who look over your site. red bottoms http://www.redbottom-shoes.us.com
    匿名2019-03-14 06:53
  12. I together with my friends were actually looking at the nice techniques located on your web page while instantly developed an awful suspicion I had not expressed respect to the blog owner for those tips. All of the women had been certainly happy to read them and have now clearly been loving those things. Many thanks for indeed being very kind and also for opting for some useful ideas millions of individuals are really needing to understand about. Our honest apologies for not expressing appreciation to earlier. caterpillar boots http://www.caterpillarboots.us.com
    匿名2019-03-15 12:27
  13. I'm also writing to let you be aware of of the impressive discovery our girl developed reading through your web page. She even learned too many issues, not to mention what it's like to possess an ideal helping heart to have the mediocre ones easily master several tortuous issues. You really surpassed readers' desires. Many thanks for distributing these interesting, trusted, explanatory and as well as unique thoughts on this topic to Julie. longchamp http://www.long-champ.us.com
    匿名2019-03-16 18:26
  14. My wife and i ended up being very delighted that Emmanuel could deal with his homework through your precious recommendations he made using your weblog. It's not at all simplistic to simply possibly be making a gift of things which usually a number of people have been trying to sell. And now we see we've got the writer to give thanks to for that. Those illustrations you've made, the straightforward website menu, the relationships your site give support to engender - it's many terrific, and it's really assisting our son and our family imagine that the subject matter is thrilling, which is rather vital. Thanks for all the pieces! michael kors outlet store http://www.michael-korsoutlets.us
    匿名2019-03-19 06:02
  15. My wife and i have been now comfortable when Michael could deal with his reports from your precious recommendations he discovered when using the blog. It's not at all simplistic to just continually be giving out points that people today might have been trying to sell. So we know we now have you to thank for this. Most of the explanations you have made, the straightforward web site navigation, the friendships you can aid to foster - it's got everything overwhelming, and it's really leading our son in addition to our family know that that article is enjoyable, which is tremendously vital. Thank you for all! yeezy boost http://urlr.be/short/yzyboostus
    匿名2019-03-20 06:26
  16. I enjoy you because of your entire work on this website. My daughter loves going through internet research and it's really obvious why. I notice all regarding the lively mode you produce functional suggestions via this blog and in addition boost response from some others on this concept and our own simple princess is certainly being taught a lot. Take advantage of the rest of the new year. Your conducting a good job. mbt shoes http://www.mbtshoesonline.com
    匿名2019-03-20 12:04
  17. We wish to thank you once more for the beautiful ideas you gave Jeremy when preparing her own post-graduate research and also, most importantly, with regard to providing all the ideas in a single blog post. Provided that we had known of your blog a year ago, we will have been saved the unnecessary measures we were choosing. Thank you very much.
    匿名2019-03-21 14:49
  18. Thanks for all your valuable efforts on this web site. My daughter really likes conducting research and it is easy to understand why. We notice all regarding the compelling method you offer simple tips by means of the web site and in addition encourage response from visitors on this topic while my girl is always being taught a lot of things. Take pleasure in the rest of the year. You're conducting a good job. retro jordans http://www.jordan-retro.us.com
    匿名2019-03-21 19:23
  19. I'm just writing to let you understand of the cool experience my wife's child went through reading your web site. She picked up lots of pieces, not to mention what it's like to possess a marvelous giving nature to get certain people effortlessly thoroughly grasp specific complex matters. You undoubtedly did more than my expectations. I appreciate you for producing those effective, safe, informative and in addition fun thoughts on that topic to Jane. michael kors handbags http://www.outletonline-michaelkors.us.org
    匿名2019-03-23 03:33
  20. its a great
    匿名2019-03-24 10:43
  21. Needed to post you one very small remark just to give thanks yet again for your personal magnificent methods you've shown in this case. It is shockingly open-handed with you to supply publicly just what most of us might have marketed for an e book to earn some dough for themselves, primarily now that you could possibly have tried it if you ever considered necessary. Those strategies additionally acted to provide a easy way to fully grasp the rest have similar eagerness like my own to figure out good deal more with regards to this matter. I know there are millions of more pleasant periods up front for individuals that scan your blog post. fila shoes http://www.filashoes.org
    匿名2019-03-24 11:35
  22. Thanks for your own work on this site. My niece really loves managing research and it's easy to understand why. Most people hear all about the compelling form you offer worthwhile items by means of the website and as well as increase response from some other people about this topic and our simple princess is actually starting to learn a whole lot. Have fun with the remaining portion of the new year. You're the one doing a fabulous job. coach factory outlet http://www.coachoutletstorefactory.com
    匿名2019-03-25 19:54