关注前端开发
关注用户体验

移动端Web开发小记

之前为公司商旅频道写移动端的页面时遇到不少问题,今特来个总结,希望能为后来者带来一些帮助。

不再考虑浏览器兼容性

移动端开发主要对象是手持设备,其中绝大部分是IOS和Android系统,so,在开发此类页面时不必纠结IE和其他一些2B浏览器的兼容性,webkit是本次开发重点。

当然,不同版本的Android是存在一些问题的,还有就是不同浏览器的版本也存在一些差别,IOS在这方面表现甚好。

所以在开发时我们只需使用Chrome进行调试即可,话说Chrome的开发者工具也是灰常不错的。

丰富的页面Meta

控制显示区域各种属性:

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  • width                      – viewport的宽度
  • height                     – viewport的高度
  • initial-scale          – 初始的缩放比例
  • minimum-scale  – 允许用户缩放到的最小比例
  • maximum-scale – 允许用户缩放到的最大比例
  • user-scalable       – 用户是否可以手动缩放

IOS中Safari允许全屏浏览:

<meta content="yes" name="apple-mobile-web-app-capable">

IOS中Safari顶端状态条样式:

<meta content="black" name="apple-mobile-web-app-status-bar-style">

忽略将数字变为电话号码:

<meta content="telephone=no" name="format-detection">

一般情况下,IOS和Android系统都会默认某长度内的数字为电话号码,即使不加也是会默认显示为电话的,so,取消这个很有必要!

IOS中Safari设置保存到桌面图标:

这是IOS中Safari特有的meta,是在你保存某个页面到桌面的时候使用这张图作为桌面图标,so,尺寸和iphone上的一致,是57*57px

<link rel="apple-touch-icon" href="custom_icon.png">

强大的CSS属性box-flex

之所以将这块作为大栏目来讲,是因为这个属性非常有用,和之前开发win8 app时的grid非常相似。

box-flex的作用是按百分比划分兄弟相同标签的width,也就是当ul里有个两个li时,每个li会自动划分ul的宽度,如果box-flex:1;那么此时,li的width就是50%

box-flex用法实例1:

<ul>
     <li>11111</li>
     <li>2222222</li>
     <li>333333333</li>
</ul>
ul{display: -webkit-box;}
ul li{-webkit-box-flex: 1;}

显示结果(需用webkit核浏览器查看,如Chrome,下同):

点此查看实例展示

box-flex用法实例2:

<div class="demo02">
	<input placeholder="百分百宽度输入框" type="text">
</div>
<style type="text/css">
.demo02{display: -webkit-box;}
.demo02 input{-webkit-box-flex: 1;width: 100%;padding:4px;height:18px;line-height:18px;border-style: solid;border-width: 1px;border-color: #ddd #ccc #ccc #ddd;}
</style>

点此查看实例展示

CSS3实用图标搜集

其他技巧

关闭Input键盘默认首字母大写:autocapitalize=”off”

赞(3)
未经允许不得转载:大前端 » 移动端Web开发小记
分享到: 更多 (0)

评论 96

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #87

    Good way of describing, and nice article to get facts on the topic of my presentation subject matter, which i
    am going to convey in university.

  2. #86

    Does your website have a contact page? I’m having problems
    locating it but, I’d like to shoot you an e-mail.
    I’ve got some ideas for your blog you might be interested in hearing.
    Either way, great website and I look forward
    to seeing it develop over time.

  3. #85

    Its like you read my mind! You seem to know a lot about this, like you wrote the book in it or
    something. I think that you could do with some percent to force the message home a bit, however
    other than that, that is magnificent blog. A great read.
    I will certainly be back.

  4. #84

    Wow, fantastic blog layout! How lengthy have you been blogging for?
    you make running a blog glance easy. The entire look of your site is excellent,
    as well as the content!

  5. #83

    I all the time used to study paragraph in news papers but
    now as I am a user of net so from now I am using net for articles or reviews, thanks to web.

  6. #82

    Simply want to say your article is as amazing.
    The clarity for your put up is just great and that i can assume you’re a
    professional in this subject. Fine along with your permission let me to grasp your RSS feed
    to stay updated with approaching post. Thank you 1,000,000 and please carry
    on the gratifying work.

  7. #81

    Awesome post.

  8. #80

    I think the admin of this web page is in fact working hard for
    his site, as here every data is quality based information.

  9. #79

    You really make it seem so easy with your presentation but
    I find this matter to be really something that I think I
    would never understand. It seems too complex and very broad for me.
    I’m looking forward for your next post, I will
    try to get the hang of it!

  10. #78

    Greetings from California! I’m bored to tears at work so I decided
    to check out your website on my iphone during lunch break.
    I really like the information you provide here and can’t wait to take a look when I get home.
    I’m surprised at how fast your blog loaded
    on my cell phone .. I’m not even using WIFI, just 3G ..
    Anyways, awesome blog!

  11. #77

    Greetings from California! I’m bored to tears at work so I decided to
    browse your website on my iphone during lunch break.
    I love the knowledge you present here and
    can’t wait to take a look when I get home. I’m amazed at how fast your blog loaded on my
    cell phone .. I’m not even using WIFI, just 3G .. Anyhow, fantastic site!

  12. #76

    I am really thankful to the owner of this website who
    has shared this enormous article at here.

  13. #75

    It is not my first time to go to see this site, i am visiting
    this web page dailly and get nice facts from here all the time.

  14. #74

    Hi there i am kavin, its my first time to commenting anyplace, when i read this paragraph i
    thought i could also create comment due to this brilliant post.

  15. #73

    Hi! I know this is kinda off topic but I was wondering if you knew where I
    could find a captcha plugin for my comment form? I’m using the same blog platform
    as yours and I’m having difficulty finding one?

    Thanks a lot!

  16. #72

    The other day, while I was at work, my sister stole my
    apple ipad and tested to see if it can survive a twenty five foot drop,
    just so she can be a youtube sensation. My apple ipad is now destroyed and she has 83 views.
    I know this is entirely off topic but I had to share it with someone!

  17. #71

    Does your blog have a contact page? I’m having a tough time locating it but, I’d like
    to send you an email. I’ve got some suggestions for your
    blog you might be interested in hearing. Either way, great site and I look
    forward to seeing it improve over time.

  18. #70
  19. #69

    Hi there! Do you know if they make any plugins to safeguard
    against hackers? I’m kinda paranoid about losing everything I’ve worked hard on. Any tips?

  20. #68

    I do not know whether it’s just me or if everyone else encountering issues with your blog.
    It appears like some of the text within your content are running
    off the screen. Can somebody else please comment and let me know if this is happening to them too?

    This may be a problem with my web browser because I’ve had this happen before.

    Many thanks

  21. #67

    Hi there to every one, because I am in fact eager of reading this blog’s
    post to be updated daily. It includes fastidious stuff.

  22. #66

    Great article, totally what I was looking for.

  23. #65

    Admiring the time and energy you put into your blog and in depth information you provide.
    It’s awesome to come across a blog every once in a while that isn’t the same unwanted rehashed information. Fantastic read!
    I’ve bookmarked your site and I’m adding your RSS feeds to my Google account.

  24. #64

    Hello to every , for the reason that I am actually eager of reading this website’s post
    to be updated regularly. It includes nice stuff.

  25. #63

    Way cool! Some very valid points! I appreciate you writing this write-up and also the rest of the website is really
    good.

  26. #62

    Can I just say what a comfort to uncover somebody that truly
    understands what they’re discussing on the
    web. You actually realize how to bring a problem to light and make it important.
    More people must look at this and understand this side of your story.
    I was surprised that you’re not more popular given that you definitely possess the gift.

  27. #61

    Wow, marvelous blog layout! How long have you been blogging for?
    you make blogging look easy. The overall look of your website is great, let alone the content!

  28. #60

    Wonderful beat ! I would like to apprentice while you amend your site, how can i subscribe for a blog website?
    The account helped me a appropriate deal. I were tiny bit familiar of
    this your broadcast offered bright transparent idea

  29. #59

    No matter if some one searches for his essential thing, therefore
    he/she wishes to be available that in detail, so that thing is maintained over here.

  30. #58

    Good post. I absolutely appreciate this site.
    Keep writing!

  31. #57

    I have been surfing online more than 2 hours today, yet I
    never found any interesting article like yours. It’s pretty worth
    enough for me. In my opinion, if all webmasters and bloggers made good content as you did,
    the net will be much more useful than ever before.

  32. #56

    Thanks very interesting blog!

  33. #55

    Pretty section of content. I just stumbled upon your web
    site and in accession capital to assert that
    I get in fact enjoyed account your blog posts.
    Any way I’ll be subscribing to your augment and even I
    achievement you access consistently quickly.

  34. #54

    This is a topic that’s near to my heart… Take care! Exactly where are your
    contact details though?

  35. #53

    It’s the best time to make some plans for the future and it
    is time to be happy. I’ve read this post and if I could I desire to suggest you some interesting things or suggestions.
    Maybe you could write next articles referring to this article.
    I want to read even more things about it!

  36. #52

    I was excited to uncover this website. I want to to thank you for your time
    for this wonderful read!! I definitely appreciated every part
    of it and I have you book marked to see new stuff on your web site.

  37. #51

    I got this site from my buddy who informed me on the topic of
    this web site and now this time I am browsing this site and reading very informative posts here.

  38. #50

    I believe this is one of the so much significant information for me.
    And i’m happy studying your article. But want to observation on few common things, The
    web site taste is ideal, the articles is truly great :
    D. Just right job, cheers

    download2周前 (06-08)回复
  39. #49

    No matter if some one searches for his vital thing, therefore he/she wants to be
    available that in detail, thus that thing is maintained over here.

    download2周前 (06-08)回复
  40. #48

    Hi! I could have sworn I’ve been to this site before
    but after checking through some of the post I realized it’s new to me.
    Anyways, I’m definitely delighted I found it and I’ll be book-marking and
    checking back frequently!

  41. #47

    Good day! Would you mind if I share your blog with
    my zynga group? There’s a lot of folks that I think would really enjoy your content.
    Please let me know. Thanks

  42. #46

    KoolClash 几小时前更新的版本利用 dnsmasq 监听 53>端口,转发给 Clash,暂时弥补了
    Clash DNS 功能的缺陷。体验还不错。

  43. #45

    I have read so many content concerning the blogger lovers
    except this piece of writing is really a good post, keep it up.

  44. #44

    of course like your web site however you need to take a look at the spelling on quite a few of your posts.
    A number of them are rife with spelling issues and I in finding it
    very bothersome to inform the truth however I will definitely come again again.

  45. #43

    I think this is one of the most vital information for me.
    And i am glad reading your article. But want to remark on some general things, The site style is great, the articles is really excellent :
    D. Good job, cheers

  46. #42

    I do believe all the concepts you’ve introduced in your post.
    They are really convincing and will certainly work.
    Still, the posts are too quick for beginners. Could
    you please extend them a little from next time? Thank you for the post.

  47. #41

    Hi there, its nice article on the topic of media
    print, we all understand media is a great source of data.

    agen judi uang asli1个月前 (05-20)回复
  48. #40

    Every weekend i used to visit this website, because i wish for enjoyment,
    as this this site conations in fact fastidious funny information too.

    judi poker1个月前 (05-20)回复
  49. #39

    I am sure this paragraph has touched all the internet viewers, its
    really really pleasant article on building up new webpage.

  50. #38

    Howdy! I could have sworn I’ve visited your blog before but after going
    through a few of the articles I realized it’s new to me. Nonetheless,
    I’m certainly happy I stumbled upon it and I’ll be book-marking it and checking
    back frequently!

    casino online terbaru1个月前 (05-20)回复
  51. #37

    It’s really a great and helpful piece of info. I am satisfied that
    you just shared this helpful info with us. Please stay us informed like
    this. Thank you for sharing.

    judi casino online1个月前 (05-20)回复
  52. #36

    Wonderful items from you, man. I have take into accout your stuff previous to and you are simply extremely great.

    I actually like what you’ve bought here, certainly like what you are saying and the
    way wherein you assert it. You make it enjoyable and you still take care of to stay it sensible.
    I can’t wait to learn far more from you. That is actually a
    tremendous site.

  53. #35

    Wow, superb blog layout! How long have you been blogging for?
    you made blogging look easy. The overall look
    of your web site is wonderful, as well as the content!

  54. #34

    I have learn some just right stuff here. Definitely price bookmarking
    for revisiting. I wonder how a lot effort you
    set to make this type of fantastic informative website.

    situs judi online1个月前 (05-20)回复
  55. #33

    you are in reality a excellent webmaster. The site loading
    velocity is amazing. It kind of feels that you
    are doing any distinctive trick. Also, The contents are
    masterwork. you’ve performed a wonderful job in this topic!

    main judi bandar661个月前 (05-20)回复
  56. #32

    Quality articles is the secret to attract the users to visit the site,
    that’s what this website is providing.

  57. #31

    I’m extremely impressed with your writing skills
    as well as with the layout on your blog.
    Is this a paid theme or did you modify it yourself? Anyway keep
    up the excellent quality writing, it’s rare to see a nice blog like
    this one today.

    agen judi bandar661个月前 (05-20)回复
  58. #30

    Hi there, everything is going perfectly here and ofcourse every one is sharing information, that’s truly excellent,
    keep up writing.

  59. #29

    At this time it looks like WordPress is the preferred blogging platform out there
    right now. (from what I’ve read) Is that what you are using on your blog?

  60. #28

    Touche. Solid arguments. Keep up the amazing effort.

    poker online 991个月前 (05-20)回复
  61. #27

    It’s remarkable to pay a quick visit this web page and reading the views of all friends concerning this article,
    while I am also keen of getting know-how.

  62. #26

    What i do not realize is if truth be told how
    you are now not really much more smartly-preferred than you might
    be right now. You’re very intelligent. You understand
    therefore considerably in relation to this subject, made me in my view believe
    it from numerous various angles. Its like women and men don’t seem to be interested until it’s one thing to
    accomplish with Woman gaga! Your own stuffs outstanding.
    Always care for it up!

    daftar judi bandarq1个月前 (05-20)回复
  63. #25

    Aussie actor Chris Hemsworth embodies the character of Thor exceptionally.

    Deadra Lynd1个月前 (05-13)回复
  64. #24

    I’d like to have more info on this subject, can I ask you the sources you used to write your post?

    Nonton Anime1个月前 (05-10)回复
  65. #23

    i just started dating and well, dating is a very exciting experience. i just love to date women..

    cat1个月前 (05-08)回复
  66. #22

    I have watched “boston legal” ever since in my college days, i love to watch courtroom drama,,

    agen poker online2个月前 (05-05)回复
  67. #21

    What’s Happening i’m new to this, I stumbled upon this I’ve found It positively useful and it has aided me out loads. I hope to give a contribution & help other users like its helped me. Good job.

    dewapoker2个月前 (05-03)回复
  68. #20

    I truly wanted to write a brief note so as to say thanks to you for the stunning secrets you are sharing here. My extensive internet investigation has at the end of the day been paid with pleasant suggestions to share with my friends and family. I would repeat that we readers actually are unequivocally blessed to live in a very good network with many brilliant individuals with very helpful techniques. I feel somewhat grateful to have encountered your entire webpages and look forward to some more pleasurable minutes reading here. Thank you once more for everything.

    Magnesium drijven2个月前 (04-18)回复
  69. #19

    I am incessantly thought about this, thanks for putting up.

    my singing monsters3个月前 (03-28)回复
  70. #18

    Woh I like your posts , saved to fav! .

    Byron Czarniecki3个月前 (03-11)回复
  71. #17

    CSS3实用图标,具体如何使用没看明白!

    Frances4年前 (2015-06-05)回复
  72. #16

    这都可以,看用户名

    习近平4年前 (2015-05-13)回复
  73. #15

    不错呀 谢谢分享

    qianrenzhang4年前 (2015-02-10)回复
  74. #14

    区分了PC端,这些基础的东西很有用,现在想学习移动端建站,有什么好资料站分享。

    西班牙移民5年前 (2014-12-09)回复
  75. #13

    正在学习移动前端,很有帮助

    web前端6年前 (2013-07-01)回复
  76. #12

    现在网上关于手机网站前端开发的资料貌似很少

    web前端6年前 (2013-06-18)回复
  77. #11

    不错,还有帮助。

    青岛网络推广6年前 (2013-03-09)回复
  78. #10

    木有图片

    wordpress教程网7年前 (2013-01-16)回复
  79. #9

    发现安卓2.3.4自带浏览器不能显示中文粗体,butEnglishisok
    发现安卓2.3.4自带浏览器不能显示中文粗体,butEnglishisok

    hei7年前 (2012-11-15)回复
  80. #8

    NB, 对wap 开发很有用。

    moto727年前 (2012-10-29)回复
  81. #7

    大前端这个名字真心霸气

    大發7年前 (2012-08-29)回复
  82. #6

    图片都挂了啊!

    所谓刚子7年前 (2012-08-27)回复
  83. #5

    谢谢分享~

    azhun7年前 (2012-08-18)回复
  84. #4

    最近也在弄这个,建议加上一条:
    由于不同版本的Android 的内置浏览器内核版本不一样,因此webkit 的点击效果可能不同,有的版本的android 点击后会出现篮框等效果,因此可以加上:
    * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    来消除

    lingyired7年前 (2012-08-10)回复
  85. #3

    我换上你的d7之后用iphone浏览效果极好,比我之前用插件还清爽啊

    5不出来7年前 (2012-08-08)回复
  86. #2

    移动手机应用呀,好高深的东西哟。

    翠龙茶庄7年前 (2012-08-08)回复
  87. #1

    很不错的web开发小记

    邢台妇科医院7年前 (2012-08-07)回复

themebetter 国内更好的WordPress主题服务商

立即前往