精华内容
下载资源
问答
  • 主要介绍了移动端WebApp隐藏地址栏的方法,本文分别给出了4种方法,适应不同情况下使用,小编推荐最后一个方法,需要的朋友可以参考下
  • 要注意的几个点:这个方法要在内容加载完成后执行,换句话浏览器内容的高度要超过浏览器窗口高度(出现‘滚动条’)才有效。 针对这个高度自适应的窗口...转载地址: http://www.jslover.com/code/357.html

    要注意的几个点:这个方法要在内容加载完成后执行,换句话浏览器内容的高度要超过浏览器窗口高度(出现‘滚动条’)才有效。

    针对这个高度自适应的窗口(height:100%),得用特殊方式解决:

    //强制让内容超过
    $('#main').css("height",window.innerHeight+100);
    window.scrollTo(0, 1);
    //重置成新高度
    $("#main").css("height",window.innerHeight);
    //非常重要,用于兼容不同机型,防止浏览器窗口移动
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

    另外,最后一行,用于阻止手动滚动页面

    转载地址:http://www.jslover.com/code/357.html

    展开全文
  • 1、很多资料说,添加以下代码,可以隐藏地址栏,但我试了很多次,貌似不成功啊。 <meta name="apple-mobile-web-app-capable" content="yes" /> 2、我们可以通过另一种方法来隐藏地址栏。在页面加载完成之后...

    1、很多资料说,添加以下代码,可以隐藏地址栏,但我试了很多次,貌似不成功啊。

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

    2、我们可以通过另一种方法来隐藏地址栏。在页面加载完成之后滚动窗口,这个确实有效,唯一要注意的是页面高度必须够高,核心代码如下:

    复制代码
    <script type="text/javascript"> 
          addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); 
          function hideURLbar(){ 
                    window.scrollTo(0,1); 
          } 
    </script>
    复制代码

    3、但是当页面高度自适应窗口(height:100%),以上方法就不适用了,我们需要采用特殊方法:

    复制代码
    $('div').css("height",window.innerHeight+100);  //强制让内容超过  
    
    window.scrollTo(0, 1);  
    
    $("div").css("height",window.innerHeight);  //重置成新高度  
    
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);  //如果不想让页面滑动,可以加上这段代码
    复制代码

     

    参考资料:http://jslover.com/?p=357

     本文转自挨踢前端博客园博客,原文链接http://www.cnblogs.com/duanhuajian/archive/2013/03/06/2946273.html如需转载请自行联系原作者


    @挨踢前端

    展开全文
  • 移动端webapp如何隐藏地址栏

    万次阅读 2014-09-19 16:26:43
    1、很多资料说,添加以下代码,可以隐藏地址栏,但我试了很多次,貌似不成功啊。 meta name="apple-mobile-web-app-capable" content="yes" /> 2、我们可以通过另一种方法来隐藏地址栏。在页面加载完成之后滚动...

    1、很多资料说,添加以下代码,可以隐藏地址栏,但我试了很多次,貌似不成功啊。

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

    2、我们可以通过另一种方法来隐藏地址栏。在页面加载完成之后滚动窗口,这个确实有效,唯一要注意的是页面高度必须够高,核心代码如下:

    <script type="text/javascript"> 
          addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); 
          function hideURLbar(){ 
                    window.scrollTo(0,1); 
          } 
    </script>

    3、但是当页面高度自适应窗口(height:100%),以上方法就不适用了,我们需要采用特殊方法:

    复制代码
    $('div').css("height",window.innerHeight+100);  //强制让内容超过  
    
    window.scrollTo(0, 1);  
    
    $("div").css("height",window.innerHeight);  //重置成新高度  
    
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);  //如果不想让页面滑动,可以加上这段代码
    复制代码

     


    文章二:

    移动前端界面进去的时候,我们会看到地址工具条,这看起来不怎么像一个APP,那么怎么隐藏掉这个地址条,下面提供了一个比较合适的代码,支持iosAndroid.

    /*! Normalized address bar hiding for iOS & Android (c) @scottjehl MIT License */
    (function( win ){
    var doc = win.document;
    
    // If there's a hash, or addEventListener is undefined, stop here
    if(!win.navigator.standalone && !location.hash && win.addEventListener ){
    
    //scroll to 1
    win.scrollTo( 0, 1 );
    var scrollTop = 1,
    getScrollTop = function(){
    return win.pageYOffset || doc.compatMode === "CSS1Compat" && doc.documentElement.scrollTop || doc.body.scrollTop || 0;
    },
    
    //reset to 0 on bodyready, if needed
    bodycheck = setInterval(function(){
    if( doc.body ){
    clearInterval( bodycheck );
    scrollTop = getScrollTop();
    win.scrollTo( 0, scrollTop === 1 ? 0 : 1 );
    }
    }, 15 );
    
    win.addEventListener( "load", function(){
    setTimeout(function(){
    //at load, if user hasn't scrolled more than 20 or so...
    if( getScrollTop() < 20 ){
    //reset to hide addr bar at onload
    win.scrollTo( 0, scrollTop === 1 ? 0 : 1 );
    }
    }, 0);
    }, false );
    }
    })( this );

    详细请访问:https://github.com/scottjehl/Hide-Address-Bar

    如果你的浏览器支持标签隐藏的话:

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

     



    展开全文
  • 1、很多资料说,添加以下代码,可以隐藏地址栏,但我试了很多次,貌似不成功啊。 &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt; 2、我们可以通过另一种方法...

    1、很多资料说,添加以下代码,可以隐藏地址栏,但我试了很多次,貌似不成功啊。

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

    2、我们可以通过另一种方法来隐藏地址栏。在页面加载完成之后滚动窗口,这个确实有效,唯一要注意的是页面高度必须够高,核心代码如下:

    <script type="text/javascript"> 
          addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); 
          function hideURLbar(){ 
                    window.scrollTo(0,1); 
          } 
    </script>

    3、但是当页面高度自适应窗口(height:100%),以上方法就不适用了,我们需要采用特殊方法:

    $('div').css("height",window.innerHeight+100);  //强制让内容超过  
    
    window.scrollTo(0, 1);  
    
    $("div").css("height",window.innerHeight);  //重置成新高度  
    
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);  //如果不想让页面滑动,可以加上这段代码

     

    参考资料:http://jslover.com/?p=357

     

     

    展开全文
  • 如何隐藏iPhone Safari的地址栏设置这个属性(文档里面说有用,但是好像不太成功) &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt; 还有一种办法,页面加载完成...
  • 隐藏移动Web应用程序中的地址栏 通过将iOS和Android驱动的设备都使用WebKit作为浏览器的呈现引擎,Web开发人员具有许多优势: 具有完美CSS动画功能的渲染引擎 快速的渲染引擎... 非常快 具有现代感和前瞻...
  • 其实这是一个浏览器自带的功能,只需要把页面结构写的好,条件: a、首先需要把dom结构撑的足够高,超过一个屏幕; b、最外层box,不能用positon:absolute; 也不能overflow:scroll 这样最外层box的高度就不够了,...
  • 判断移动端浏览器地址栏显示Is the ability to see the addresses for weblinks the only reason that you keep the Status Bar visible? Now you can hide the Status Bar and move that address display to the ...
  • 移动端webapp 全屏

    2019-11-18 19:04:05
    最近使用vux开发一款手机webapp,在手机上看到地址栏和下面的工具栏占了很大一部分空间,就想可不可以去掉。最终找到了解决办法。我用的是vue cli生成的模板,在项目根目录下的index.html头部加上下面内容: ...
  • iphone webapp

    2019-09-24 18:30:16
    App 图标 (apple-touch-icon可以指定sizes来告诉设备该使用哪个图片)苹果从IOS4.2开始mobile safari就开始支持把网页保存至主屏,从而使得用户可以方便的从主屏的快捷方式进入webapp,而通过苹果提供给我们的API...
  • webApp总结

    2019-10-08 10:44:33
    -- 可隐藏地址栏,仅针对IOS的Safari(注:IOS7.0版本以后,safari上已看不到效果) --> < meta name= "apple-mobile-web-app-capable" content= "yes" /> <!-- 仅针对IOS的Safari顶端状态条的样式(可选default...
  • IOS启用WebApp全屏模式

    千次阅读 2018-03-01 16:13:00
    当网站添加到主屏幕后再点击进行启动时,可隐藏地址栏(从浏览器跳转或输入链接进入并没有此效果) 代码实例如下: 1 2 <meta name="apple-mobile-web-app-capable" content="yes" /> <meta nam...
  • webapp开发

    2017-03-10 15:13:00
    当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari  (new) 将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式 viewport模板  (new) 常见问题 移动端如何...
  • webapp摘要

    2015-01-28 17:37:00
    对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具、状态、滚动条等等之后用于看网页的区域,这是真正有效的区域。由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport; 实际上我们...
  • 接下来给大家来详细讲解一下:在上一节中我们已经介绍怎么去做一个开机引导图了[webAPP项目]基于MUI框架webAPP开发功能流程之引导图制作详解01如果不会的,就按照上一篇文章讲解的自己在作一遍.效果图最终我们要实现的...
  • webapp 开发进阶

    2013-11-20 16:11:45
    苹果从IOS4.2开始mobile safari就开始支持把网页保存至主屏,从而使得用户可以方便的从主屏的快捷方式进入webapp,而通过苹果提供给我们的API我们可以使得 webapp 像原生app 一样拥有自己的icon。 rel="apple-...
  • webapp 技术总结

    2013-07-03 21:21:49
    如果你是一名前端er,又想在移动设备上开发出自己的应用,那...对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具、状态、滚动条等等之后用于看网页的区域,这是真正有效的区域。由于移动设备屏...
  • 移动端音乐WebApp

    千次阅读 2019-07-15 18:40:30
    │ ├─search ->整个搜索页面的实现 │ ├─singer ->所有歌手列表页(引用listview) │ ├─singer-detail ->歌手详情页(引用music-list) │ ├─suggest ->搜索页面核心组件,数据获取等 │ ├─tab ->导航(歌手...
  • 移动端webapp开发要点总结

    千次阅读 2013-12-27 14:22:21
    如果你是一名前端er,又想在移动设备上开发出自己的应用,那怎么实现呢?...对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具、状态、滚动条等等之后用于看网页的区域, 这是真正有效的区域。由于移
  • webAPP前端必备知识

    千次阅读 2016-04-08 11:24:31
    // 隐藏状态  "black"   name= "apple-mobile-web-app-status-bar-style"   /> //指定的iphone中safari顶端的状态条的样式  //iOS系统4.3版本以后,升级后对safari造成了一个bug:即使你添加了如下...
  • webAPP meta 标签大全

    2015-04-07 09:50:00
    viewport即可视区域,对于桌面浏览器而言,viewport指的就是除去所有工具、状态、滚动条等等之后用于看网页的区域。对于传统WEB页面来说,980的宽度在iphone上显示是很正常的,也是满屏的,但对于webapp而言,...
  • WebAppwebApp开发总结(集合贴)

    千次阅读 2014-03-18 16:58:40
    一、移动WebApp简单介绍  WebApp简介  Web app是一种通过网络(如互联网或内联网)访问的应用程序;也可以指计算机软件承载在浏览器支持环境下或使用浏览器支持语言(如JavaScript)并依赖于web 浏览器来渲染...
  • webapp开发小tips

    千次阅读 2014-05-20 15:38:04
    5. 隐藏地址栏 & 处理事件的时候,防止滚动条出现: 这样设计会使得浏览器的地址栏“失踪”,这并不是浏览器的Bug,可以通过浏览器的菜单键或手机上的menu键调出来。不过这不是webapp开发者要考虑的事情了.. ...
  • webkit webApp 开发技术要点总结 如果你是一名前端er,又想在移动设备上开发出自己的应用,那怎么实现呢?...对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具、状态、滚动条
  • webapp 移动端开发

    2015-07-08 14:11:00
     当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- ios7.0版本以后,safari上已看不到效果 -->  将网站添加到主屏幕...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,902
精华内容 760
关键字:

webapp隐藏地址栏