IOS web app一些实用的属性设置

最新推荐文章于 2018-08-13 14:24:46 发布

nightsmiles

最新推荐文章于 2018-08-13 14:24:46 发布

阅读量2.4k

点赞数

IOS web app一些实用的属性设置 (转)

IOS对safari私有的属性很多，虽然很多不为人知但是却很实用。掌握好这些属性对web app和混合app的开发会很有帮助。

1.format-detection[telephone=no] 是否自动把电话号码转为链接

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

1

IOS针对HTML文档内的纯文字，会自动转换为电话号码链接，当点击时，会默认和系统的拨号相关联，但是开发者有时候并不想这样。

这时只要在head加上上面这段meta，就不会了。

2. viewport 控制应用屏幕属性

 
   
        < 
        meta 
        name 
        = 
        "viewport" 
        content 
        = 
        "width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" 
         /> 
       
 
 

1

viewport是一个针对移动web的meta标签，它的主要属性如下：

width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

height：和 width 相对应，指定高度。

initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。

maximum-scale：允许用户缩放到的最大比例。

minimum-scale：允许用户缩放到的最小比例。

user-scalable：用户是否可以手动缩放

为什么我们要设置width和height©因为移动终端的分辨率比常用的显示器要小，假如我们把一般的网站在safari打开，会发现整体布局和文字都缩小的显示在手机屏幕上，只有我们把浏览器宽度设置成和我们手机分辨率宽度一样，才是1:1的对应显示。所以一般我们开发web app，width=device-width 把宽度设置成和设备宽度一样。

至于 initial-scale、maximum-scale、minimum-scale 就是在出现了页面内容和设备分辨率不是1:1 对应的时候用的，我们都知道用户可以使用双指操作将safari页面放大或者缩小，user-scalable可以控制用户是否可以这么做。假如我们设置了 width=device-width，一般我们不再需要给用户缩放。特别针对混合型的web app，我们体验尽量向原生APP靠拢，不允许缩放是大部分应用的做法。

这里有个经验分享，之前我在使用jquery mobile 1.0.2 版本的时候，发现jqm初始化的时候会用javascript把user-scalable设置成true，所以那时候即使我加了meta标签，也没有作用，后来才发现是jqm搞的鬼。后来1.1.0版本没有这个问题，假如你设置了这个meta标签的属性发现不生效，可以检查一下是不是一些第3方框架对这些属性做了设置。

3.webkitTouchCallout 禁止原生弹出菜单

在IOS浏览器里面，假如用户长按a标签，都会出现默认的弹出菜单事件，例如：

CSS3 的webkitTouchCallout 属性可以控制这个原生行为是否被执行，只要加上这段CSS

 
        body {  -webkit-touch-callout:  
        none 
        ; }

javascript也是可以设置的：

 
        document.documentElement.style.webkitTouchCallout =  
        'none' 
        ;

上面都是设置在body全局上，当然如果你只想某些地方不执行这种行为，可以把CSS属性定义在对应的地方。

4.webkitUserSelect 禁止用户选中

如果用户长按web网页的文本内容，都会出现选中的行为，提供复制文字等功能。

和上面的属性一样，设置可以禁止这种默认行为。

CSS的方法

 
        body { -webkit-user-select:  
        none 
        ; }

javascript方法

1

 
        document.documentElement.style.webkitUserSelect  =  
        'none' 
        ; 
       
UIKit提供UIWebView组件，允许开发者在App中嵌入Web页面。通过UIWebView组件，我们可以在应用中很方便的嵌入HTML页面。在利用IOS原生的组件进行界面开发时，界面UI元素的布局需要我们去一点点的计算，尤其是对于复杂点的图文混排的内容来说，这种计算有时很让人头痛。与原生组件相比，HTML本身的结构性语义性较强，利用CSS能更加方便快捷的进行内容布局和美化，同时Javascript可以为页面添加所需的交互动作和处理逻辑。因此利用HTML/CSS/Javascript在界面上添加那些低交互性纯展示性的内容有时是比较好的选择，虽然这可能增加了学习的成本，但现在基本上每个开发人员都或多或少的学习和使用过这些前台技术，更何况对于那些从传统前端开发转至移动端开发的人员，这些学习成本基本可以忽略不计。 
 
 常见默认交互行为 
 
       用过UIWebView组件的开发者都知道，当UIWebView加载显示HTML页面时，组件本身提供了一些系统默认的交互行为，这些默认行为包括: 
 
         1.长按文本区域显示文字放大镜，选择指定区域的网页内容，包括文字和图片,执行复制，粘贴等 
 
         2.长按链接对象呼出弹窗框，执行页面跳转或保存图片等 
              
      对于移动终端来说，因缺少PC机下的键盘鼠标，而只是依赖有限的可被识别的那几种手势来进行操作，极大的限制了交互的灵活性。例如我们要保存网页内的某张图片，利用鼠标右键弹出菜单的“保存图片”很快的能完成这个交互，相反在移动端的iPad上，一时会不知所措，因此，这才出现了像以上提到的第二种交互行为用以保存图片。所以这些系统行为更加方便用户浏览Web页面，同时也为UIWebview组件贴上了一个醒目的标签。
 
 禁用默认的交互行为 
 
        实际的开发工作中，有时我们希望尽量让UIWebView组件的网页内容无论从外观还是交互上来说都更见接近原生组件，因此这些系统默认行为就成为了我们达到该效果的障碍。还好通过Webkit内核提供的一些特殊的CSS属性 ，我们可以很方便的禁用掉这些默认的行为。首先我们介绍两个特殊的CSS属性 
 
          -webkit-touch-callout(IOS2.0及以后可用) 
 
             长按诸如链接的目标对象时，是否允许呼出默认的popOver，当前选择值包括: 
                 none:不呼出弹窗框 
                 inherit:可以呼出弹窗框 
 
         在IOS中，当你touch和hold一个触控对象时，例如链接，Safari会显示一个包含链接信息的弹出框。该属性允许你来禁用这个弹出框。 
 
          -webkit-user-select(IOS3.0及以后可用) 
 
             是否允许用户选择元素的内容，选择值包括： 
 
             auto:用户可以选择元素内的内容 
             none:用户不能选择任何内容 
             text:用户只能选择元素内的文本 
 
       通过属性的名称和简单的描述，可能我们已经清楚的知道下一步该怎么做。假设我们要加载的HTML页面为myPage.html，该页面包含了文字，链接和图片等等，我们以此为前提用简单的代码说明， 
 
         1.禁用整个页面的用户选择和链接弹出框，可页面样式表中添加如下样式规则 
  
            1 body.disable-default-action
 
            2 {
 
            3     -webkit-touch-callout:none ;
 
            4     -webkit-user-select:none ;
 
            5 }
 
        同时在body标签中加入该类型,如 
 
            1 <body class = "disable-default-action">
 
            2     page content….
 
            3 </body>
 
        2.只允许Form表单域执行文本的剪切板操作，添加如下规则 
 
            1 *:not(input,textarea) {
 
            2     -webkit-touch-callout: none;
 
            3     -webkit-user-select: none;
 
            4 }
 
       3.禁用某个链接的长按弹出框,可在链接添加内联样式规则如下 
 
            1 <a href="http://www.baidu.com" style = "-webkit-touch-callout:none">
 
       4.以编程方式动态的向加载页面添加样式来达到同样的效果 

        实现UIWebviewDelegate协议，在webViewDidFinishLoad:方法中添加以下代码 
 
            1 - (void)webViewDidFinishLoad:(UIWebView *)webView {
 
            2    // 禁用用户选择
 
            3    [webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.style.webkitUserSelect='none';"];
 
            4     
 
            5    // 禁用长按弹出框
 
            6    [webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.style.webkitTouchCallout='none';"];
 
            7 }
 
一点补充 

      UIWebview类中有有一个名为scalesPageToFit的BOOL属性，该属性指定当web页面与UIWebView的大小不一致时，是否缩放web页面来使用 UIWebView组件的大小。默认值为NO，即忽略web页面与webview组件的大小关系，以页面的原始大小进行显示，不执行任何缩放。有时为了保证内容出现滚动条，要确保HTML页面的大小与webview组件的大小的一致性，同时设置webview.scrollView.scrollEnabled  = NO . 

通过以上的几点，对于加载展示简单的HTML页面，基本上我们可以达到"以假乱真"的效果了。 

StackOverflow相关讨论: Disabling user selection in UIWebView 
 Apple Webkit 手册:CSS
 CSS :not() 参考

nightsmiles

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IOS web app一些实用的属性设置

IOS web app一些实用的属性设置 (转)IOS对safari私有的属性很多，虽然很多不为人知但是却很实用。掌握好这些属性对web app和混合app的开发会很有帮助。1.format-detection[telephone=no] 是否自动把电话号码转为链接1metaname="format-detection"
复制链接

扫一扫