gpt4 book ai didi

jquery - 流体布局,窗口的宽度在移动 (WP) 浏览器上未调整大小

转载 作者:太空宇宙 更新时间:2023-11-04 13:21:46 25 4
gpt4 key购买 nike

我正在尝试构建一个支持移动 View 的简单网络布局。我所做的就是here .如果我调整窗口大小,布局在 firefox 或 chrome 上成功更改。
但是,当我尝试在我的 Windows Phone 浏览器上打开它时,页面宽度不符合我手机的屏幕宽度,因此布局没有改变。
如果窗口的宽度小于 450px,我将布局更改为移动 View 。
我的手机纵向宽度为 400px,横向宽度为 800px。
这是来源:

<script src='jquery.js'></script>
<script src='jquery-ui.js'></script>
<style>
body{
font-size: 15px;
}
#navigation{
height: 50px;
position:relative;
max-width : 1100px;
margin: 10px auto;
background: #686868;
}
#konten{
position:relative;
max-width : 1100px;
margin: 10px auto;
background: #ccc;
}

#navigation .ifhide{
display: block;
float: left;
}
.ifhide{

width:100%;
height: 160px;
}
@media screen and (min-width: 749px){
.isi{
width: 68%;
height: auto;
display: inline-block;
float: left;
background: #5f0;
}
.sidebar{
width: 30%;
height: auto;
display: inline-block;
float: right;
background: #afa;
}
}
@media screen and (max-width: 748px){
.isi{
width: 100%;
height: auto;
display: inline-block;
float: left;
background: #5f0;
margin-bottom: 5px;
}
.sidebar{
width: 100%;
height: auto;
display: inline-block;
float: right;
background: #afa;
}
}
@media screen and (min-width: 451px){
#navigation a{
display: inline-block;
float: left;
}
.home{
width: 10%;
height:40px;
background: #0a0;
}
.pictures{
width: 15%;
height:40px;
background: #fa0;
}
.videos{
width: 15%;
height:40px;
background: #aff;
}
.snd{
width: 50%;
height:40px;
background: #faf;
}
.about{
width: 10%;
height:40px;
background: #ffa;
}
}
@media screen and (max-width: 450px){
#navigation a{
display: block;
float: left;
}
.home{
width: 50%;
height:40px;
background: #fa0;
}
.pictures{
width: 100%;
height:40px;
background: #0af;
}
.videos{
width: 100%;
height:40px;
background: #aff;
}
.snd{
width: 100%;
height:40px;
background: #faf;
}
.about{
width: 100%;
height:40px;
background: #ffa;
}
.menu{
width: 50%;
height:40px;
background: #faf;
float: right;
}
}
</style>
<script>
function menu(){
var itsvar = $(".menu").attr("itsvar");
if (itsvar == 0){
$(".ifhide").show({
easing : "slide",
duration: 300
});
$(".menu").attr("itsvar","1");
}
if (itsvar == 1){
$(".ifhide").hide({
easing : "slide",
duration: 300
});
$(".menu").attr("itsvar","0");
}

}
$(document).ready(function(){
var scrwidth = $(window).width();
if (scrwidth <= 450){
$(".pictures").detach().appendTo(".ifhide");
$(".videos").detach().appendTo(".ifhide");
$(".snd").detach().appendTo(".ifhide");
$(".about").detach().appendTo(".ifhide");
$(".menu").show();
$(".ifhide").hide();
}
})
$(window).resize(function(){
var scrwidth = $(window).width();
var isiwidth = $(".isi").width();
$(".isi").html("width = "+$(window).width()+"<br>height = "+$(window).height()+"<br>width class isi = "+isiwidth);
if (scrwidth <= 450){
$(".pictures").detach().appendTo(".ifhide");
$(".videos").detach().appendTo(".ifhide");
$(".snd").detach().appendTo(".ifhide");
$(".about").detach().appendTo(".ifhide");
$(".menu").show();

}
if (scrwidth > 450){
$(".about").detach().prependTo("#navigation");
$(".snd").detach().prependTo("#navigation");
$(".videos").detach().prependTo("#navigation");
$(".pictures").detach().prependTo("#navigation");
$(".home").detach().prependTo("#navigation");
$(".menu").hide();
$(".ifhide").hide({});

}
});
</script>
<nav id='navigation'>
<a class='home'>Home</a>
<a class='pictures'>Pictures</a>
<a class='videos'>Videos</a>
<a class='snd'>Search &amp; Development</a>
<a class='about'>About</a>
<a class='menu' onclick='menu()' itsvar='0' style='display:none'>Menu</a>
<div class='ifhide' style='display:none;'>
</div>
</nav>
<div id="konten">
<div class='isi'>
class isi di sini
</div>
<div class='sidebar'>
class sidebar di sini
</div>

</div>

那么,我是不是漏掉了什么?
为此真的需要 jquery mobile 吗? (我没加)
注意:我还没有在其他移动浏览器(android、ios)中测试它。

最佳答案

像这样在头部部分添加元标记:

<meta name="viewport" content="width=device-width">

这应该可以解决问题。

关于jquery - 流体布局,窗口的宽度在移动 (WP) 浏览器上未调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24029410/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com