Javascript 从android/iphone中删除url搜索栏_Javascript_Mobile_Css

Javascript 从android/iphone中删除url搜索栏

javascript mobile css

Javascript 从android/iphone中删除url搜索栏,javascript,mobile,css,Javascript,Mobile,Css,我有一张桌子，在一页上： <table border="0" width="320px" height="480px" style="background-color: black;"> 更新：我想删除上面的搜索栏。。。因此，这就是我为手机所做的调整： <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name=

我有一张桌子，在一页上：

<table  border="0" width="320px" height="480px" style="background-color: black;">

更新：

我想删除上面的搜索栏。。。因此，这就是我为手机所做的调整：

 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <title></title>
     <style type="text/css">
          body{
              margin:0px;
              padding: 0px;
          }
     </style>
     <script>
         window.addEventListener("load",function() {
           // Set a timeout...
           setTimeout(function(){
           // Hide the address bar!
           window.scrollTo(0, 1);
           }, 0);
         }); 
    </script>   
 </head>


身体{
边际：0px；
填充：0px；
}
addEventListener（“加载”，函数（）{
//设置一个超时。。。
setTimeout（函数（）{
//隐藏地址栏！
滚动到（0，1）；
}, 0);
});

我仍然可以看到一英寸的导航栏。但我正在尝试删除这一英寸，但无法尝试根据方向使用媒体查询不同的css规则：

/* i assume portrait to be the starting point */ .element{ rule:value; } @media (orientation: landscape) { .element{ rule:different value; } } /*我假设肖像画是起点*/ .元素{ 规则：价值； } @媒体（方向：景观）{ .元素{ 规则：不同的价值观； } }

<>但考虑设计一些更具响应性的方案，也许

< P>试着根据定位使用不同的CSS规则的媒体查询：

/* i assume portrait to be the starting point */ .element{ rule:value; } @media (orientation: landscape) { .element{ rule:different value; } }

        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=1;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <title>Your <?php echo  $app_name; ?> </title>
        <style type="text/css">
            body{
                margin:0px;
                padding: 0px;
            }
             /* i assume portrait to be the starting point */

        </style>
        <script>
     window.addEventListener("load",function() {
  // Set a timeout...
  setTimeout(function(){
    // Hide the address bar!
    window.scrollTo(0, 1);
  }, 0);
}); 

var preventDefault = function(e) {
    e.preventDefault();
    return false;
};
document.addEventListener('touchmove',preventDefault,false);
document.body.addEventListener('touchmove',preventDefault,true);
window.addEventListener('touchmove',preventDefault,true);
    </script>

    </head>

/*我假设肖像画是起点*/ .元素{ 规则：价值； } @媒体（方向：景观）{ .元素{ 规则：不同的价值观； } } <>但是考虑设计一些更具反应性的东西，也许

<代码>

        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=1;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <title>Your <?php echo  $app_name; ?> </title>
        <style type="text/css">
            body{
                margin:0px;
                padding: 0px;
            }
             /* i assume portrait to be the starting point */

        </style>
        <script>
     window.addEventListener("load",function() {
  // Set a timeout...
  setTimeout(function(){
    // Hide the address bar!
    window.scrollTo(0, 1);
  }, 0);
}); 

var preventDefault = function(e) {
    e.preventDefault();
    return false;
};
document.addEventListener('touchmove',preventDefault,false);
document.body.addEventListener('touchmove',preventDefault,true);
window.addEventListener('touchmove',preventDefault,true);
    </script>

    </head>

你的身体{ 边际：0px；填充：0px； } /*我假设肖像画是起点*/ addEventListener（“加载”，函数（）{ //设置一个超时。。。 setTimeout（函数（）{ //隐藏地址栏！滚动到（0，1）； }, 0); }); var默认值=函数（e）{ e、预防默认值（）；返回false； }; document.addEventListener（'touchmove'，preventDefault，false）； document.body.addEventListener（'touchmove'，preventDefault，true）； addEventListener（'touchmove'，preventDefault，true）；这就是我想要的。。无导航，并禁用所有事件


你的
身体{
边际：0px；
填充：0px；
}
/*我假设肖像画是起点*/
addEventListener（“加载”，函数（）{
//设置一个超时。。。
setTimeout（函数（）{
//隐藏地址栏！
滚动到（0，1）；
}, 0);
}); 
var默认值=函数（e）{
e、 预防默认值（）；
返回false；
};
document.addEventListener（'touchmove'，preventDefault，false）；
document.body.addEventListener（'touchmove'，preventDefault，true）；
addEventListener（'touchmove'，preventDefault，true）；

这就是我想要的。。无导航，并禁用所有事件。至于隐藏导航栏，只有当您的页面有足够的高度来填充剩余空间时，才可以将页面滚动到0。在滚动之前和之后，我有时会使用javascript重新zise并重新调整大小

function scrollWinToTop () {
    document.body.style.height = (window.innerHeight *1.5) + 'px'; //a lot of pixels or a large precentage
    window.scrollTo(0, 1); // moves the viewport to the top
    document.body.style.height = 'auto'; // OR clientHeight + 'px' OR something
}

至于隐藏导航栏，只有当您的页面有足够的高度来填满剩余空间时，才可以将页面滚动到0。在滚动之前和之后，我有时会使用javascript重新zise并重新调整大小

function scrollWinToTop () {
    document.body.style.height = (window.innerHeight *1.5) + 'px'; //a lot of pixels or a large precentage
    window.scrollTo(0, 1); // moves the viewport to the top
    document.body.style.height = 'auto'; // OR clientHeight + 'px' OR something
}

本网站还提供了一些其他建议，但github:gist中提供了这一无意义、无需担心的建议，并回答了您的问题（为了方便起见粘贴在此处）：

这将隐藏地址栏，直到用户滚动

此站点在超时函数中放置了相同的方法（没有解释其合理性，但它声称没有超时函数代码无法正常工作）：

本网站还提供了一些其他建议，但github:gist中提供了这一无意义、无需担心的建议，并回答了您的问题（为了方便起见粘贴在此处）：

这将隐藏地址栏，直到用户滚动

此站点在超时函数中放置了相同的方法（没有解释其合理性，但它声称没有超时函数代码无法正常工作）：

如果你找到了答案，那么你可以在下面回答你自己的问题。这不对。我仍然可以看到url搜索栏如果你找到了答案，那么你可以在下面回答你自己的问题。这不对。我仍然可以看到url搜索栏