• 移动平台开发需要的记录


         我之前在大学的时候一直都是学校PC端的前端开发,现在工作了,还在试用期,导师给了我些练习,这次的练习是页面在ipad上的展示,趁着这个时候,我觉得要好好记录一下这次累积的经验。

      1. 要求之一是使用iscroll模拟。

       但是iscroll是什么啊?为此我去google了一番。看了一些入门级的文章,大概了解了iscroll的用法。

       网上有一大堆用法的介绍:http://www.nb88.net/Index/p/id/406  等等。

       其实在移动平台上我没有碰到过对于滚动的问题,这个iscroll是解决移动端的滚动问题,我觉得需要在应用中再好好体验一下。

      2. 移动平台的meta标签。

       这个meta在移动平台上有非常神奇的地方。

       2.1 <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />

        这一句可以让我们用全屏来布局我们的页面了,不用再担心页面显示被浏览器缩小。

        viewport即可视区域,对于桌面浏览器而言,viewport指的就是除去所有工具栏、状态栏、滚动条等等之后用于看网页的区域。对于传统WEB页面来说,980的宽度在iphone上显示是很正常的,也是满屏的,但对于webapp而言,可能就有点问题了,在iphone上我们的webapp在竖屏下通常宽度都是320,这时我们320页面在iphone上显示成啥效果呢?有人可能认为iPhone不是320的宽度吗,感觉应该是满屏的吧,事实呢?屏幕被缩放了,变成在PC上显示的那样。

        一些参数:

         viewport 的宽度 (范围从 200 到 10,000 ,默认为 980 像素 )
        height: viewport 的高度 (范围从 223 到 10,000 )
        initial-scale: 初始的缩放比例 (范围从>0到 10 )
        minimum-scale: 允许用户缩放到的最小比例
        maximum-scale: 允许用户缩放到的最大比例
        user-scalable: 用户是否可以手动缩放

            2.2 <meta name=”format-detection” content=”telephone=no” />

        你明明写的一串数字没加链接样式,而iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号!想去掉这个拨号链接该如何操作呢?这时我们的meta又该大显神通了,代码如下:

               telephone=no就禁止了把数字转化为拨号链接!
        telephone=yes就开启了把数字转化为拨号链接,要开启转化功能,这个meta就不用写了,在默认是情况下就是开启!

            2.3 <meta name=”apple-mobile-web-app-capable” content=”yes” />

        这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示。

            2.4 <meta name=”apple-mobile-web-app-status-bar-style” content=”black|default|black-translucent” />

        作用是控制状态栏显示样式。

  • 相关阅读:
    Java 利用 UUID 生成唯一性 ID 示例代码
    IntelliJ IDEA 使用前常用设置
    Tomcat 启动时项目报错 org.springframework.beans.factory.BeanCreationException
    MySQL-8.0.11 在 Windows10 上的安装
    Jwt在javaweb项目中的应用核心步骤解读
    nginx于tomcat项目整合(拆分静态文件)
    nginx提高加载静态文件速度
    Java构建网站多级菜单功能解决方案
    java手写的动态数组JimisunArray
    JavaIo编程基础复习
  • 原文地址:https://www.cnblogs.com/zhuyingyan/p/3256660.html
Copyright © 2020-2023  润新知