问题：

修改网页，使其更兼容移动/平板电脑

田念

2023-03-14

所以，

我正在寻找一些帮助，使一个相当简单的页面更加移动/平板电脑友好，因为目前在某些移动设备上，它看起来非常丑陋：S

我试着正确定位东西，使用像素而不是百分比，因为我只在每个角落（顶部和底部栏）做东西，我试图结合一些缩放以及代码，使图像不显示在一定的屏幕宽度

有人能帮我纠正html/css，使其完全兼容吗？因为当我进行更改时，它从来都不起作用。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <meta content="true" name="HandheldFriendly" />
    <meta content="width=device-width" name="viewport" />
    <meta content="width=device-width,initial-scale=0.75" name="viewport" />
    <title>Website.com</title>
    <link href="testing.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="header_container">
        <div id="header">
            <div class="headimage">
                <a href="http://website.com/" target="_blank">
                    <img alt="" class="headimager" src="http://placehold.it/350x95/" />
                </a>
            </div>
            <select class="class-selector">
                <option value="">- Testing Dropdown -</option>
            </select>
            <div class="classcycler"><a href="javascript: void(0);" id="NextPage"><font color="#EFEFEF">Next Page</font></a>  <font color="red">|</font>  <a href="javascript: void(0);" id="PreviousPage"><font color="#EFEFEF">Previous Page</font></a>
            </div>
            <div class="classcycler2"><a class="downclass" href="javascript: void(0);"><font color="#EFEFEF">Scroll Down</font></a>  <font color="red">|</font>  <a class="upclass" href="javascript: void(0);"><font color="#EFEFEF">Scroll Up</font></a> 
            </div>
            <div class="headright"><a class="TOPJS" href="javascript: void(0);"><font color="#EFEFEF">Up to Top</font></a> 
                <br/> <a class="KEYJS" href="javascript: void(0);"><font color="#EFEFEF">Down to Bot</font></a> 
            </div>
        </div>
    </div>
    <div id="container">
        <table id="gradient-style" summary="">      <tbody><thead><tr><th colspan="30">Data>>>>>Test>>>>>123>>>>>Please>>>>>Help>>>>>Stackoverflow>>>>>Testing>>>>>Here>>>>>Data>>>>>Test>>>>>123>>>>>Please>>>>>Help>>>>>Stackoverflow>>>>>Testing>>>>>Here>>>>>Data>>>>>Test>>>>>123>>>>>Please>>>>>Help>>>>>Stackoverflow>>>>>Testing>>>>>Here>>>>>Data>>>>>Test>>>>>123>>>>>Please>>>>>Help>>>>>Stackoverflow>>>>>Testing>>>>>Here>>>>></th></tr></thead></tbody></table>
    </div>
    <div id="footer_container">
        <div id="footer">
            <div class="footimage">
                <a href="http://website.com/" target="_blank">
                    <img alt="" class="footimager" src="http://placehold.it/350x95/" />
                </a>
            </div>
            <div class="footleft">
                <a class="def" href="javascript: void(0);"></a>
            </div>
            <div class="footright">
                <a class="abc" href="javascript: void(0);"></a>
            </div>
        </div>
    </div>
</body>
</html>

body {
    background: #F0F0F0;
    line-height: 1.6em;
    margin: 0;
    overflow-x: scroll;
    padding: 0;
}

#header_container {
    background: url(gradhead.png) repeat-x #111625;
    border: 0 solid #666;
    height: 80px;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
}

#footer .headimage {
    position: relative;
}
#header .headright {
    font-size: 20px;
    position: fixed;
    right: 10px;
    text-align: right;
    top: 15px;
}

#header .class-selector {
    left: 10px;
    position: fixed;
    top: 5px;
}

#header .classcycler {
    font-size: 20px;
    left: 10px;
    position: fixed;
    top: 30px;
}

#header .classcycler2 {
    font-size: 20px;
    left: 10px;
    position: fixed;
    top: 50px;
}

#container {
    margin: 0 auto;
    padding: 80px 0;
    width: 100%;
}

#footer_container {
    background: url(gradhead.png) repeat-x #111625;
    border: 0 solid #666;
    bottom: 0;
    height: 80px;
    left: 0;
    position: fixed;
    width: 100%;
}

#footer .footleft {
    font-size: 20px;
    left: 10px;
    position: absolute;
    top: 10px;
}

#footer .footright {
    font-size: 20px;
    position: absolute;
    right: 10px;
    top: 10px;
}

#footer .footimage {
    position: relative;
    top: -13px;
}

#footer .footleft a {
    background: url(http://placehold.it/60x60/) no-repeat;
    display: block;
    height: 60px;
    width: 60px;
}

#footer .footleft a:hover {
    background: url(http://placehold.it/60x60/000) no-repeat;
}

#footer .footright a {
    background: url(http://placehold.it/60x60/) no-repeat;
    display: block;
    height: 60px;
    width: 60px;
}

#footer .footright a:hover {
    background: url(http://placehold.it/60x60/000) no-repeat;
}

#header,#footer {
    color: #ECECEC;
    height: 100%;
    margin: 0 auto;
    position: relative;
    text-align: center;
    width: 100%;
}

@media screen and max-width 600px {
    .headimager {
        display: none;
    }
}

@media screen and max-width 450px {
    .footimager {
        display: none;
    }
}

没有jsfiddle链接的原因是因为它不允许我把meta标签放进去。

$("a.def").click(function () {
    $('body').animate({
        "scrollLeft": "-=404"
    }, 200);
});

$("a.abc").click(function () {
    $("body").animate({
        "scrollLeft": "+=404"
    }, 200);
});

共有3个答案

邵兴文

2023-03-14

环顾四周，我发现了这些可滚动表格的解决方案，请看一看，并让我知道这是否可以帮助您：

带有HTML和CSS的表格滚动

使用此代码：

tbody{
 height: 400px;/*set the size you want*/
 overflow: auto;
}

还有这个jquery：

仅CSS可滚动的固定标题表

欧镜

2023-03-14

正如Drue评论的那样，我不认为doctype会在这种情况下改变任何事情...

处理不同形状因素（如平板电脑和手机）的最佳方法是使用媒体查询，就像你已经做过的那样。这些可能需要大量的写作才能正确，因此我建议您使用一个框架。可以说，自举(http://getbootstrap.com/)是目前最流行的，但是有很多框架可以处理桌面到移动设备的性能下降。

如果你不想使用框架，最小宽度和最大宽度是你的朋友。它们将允许项目开始出现在彼此下面，而不是彼此旁边。

引导您的网站如果我们查看您的代码片段，您需要应用Bootstrap的网格系统。如果您将bootstrap添加到代码中，css可能会覆盖一系列内容，或者实际上首先会破坏您的布局。我可能需要一些工作来做对。（另一个lib可能会更好，但本质上它们都是一样的，所以我将保持这个引导）

引导使用网格系统（和许多其他系统一样）将项目保持在适当的位置，并使它们随着视口变小而优雅地移动。Bootstrap是以“移动优先”的理念构建的，这意味着您可以从最小的视口向上工作到桌面机器。这听起来可能很傻/对你的想法不敏感，但在使用中非常实用。Bootsrap有几个类和ID可以添加到HTML中，然后它会自动调整正确组件的大小。它创建了12列的布局。大多数网站不会有12列，所以您可以创建跨越12列中2列或更多列的列。http://getbootstrap.com/css/#grid这很好地说明了这一点。看看你的代码，你可能会得到这样的结果

<body>
    <div id="header_container" class="container"><!-- .container centers it -->
        <!-- see: http://getbootstrap.com/components/#navbar for navbar stuff -->
        <div id="header" class="navbar-header"> 
            <div class="headimage navbar-brand">
                <a href="http://website.com/" target="_blank">
                    <img alt="" class="headimager" src="http://placehold.it/350x95/" />
                </a>
            </div>
            [..]    
        </div>
    </div>
    <!-- .row and .col-* manage the grid system -->
    <div class="row">
      <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
        The below help-help-help should be 3 columns on large screens, and stack on top of eachother on smaller resolutions
      </div>
    </div>
    <div class="row">
        <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
          help 1
        </div>
        <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
          help 2
        </div>
        <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
          help 3
        </div>
    </div>
    <div id="footer_container">
        <div id="footer" class="row">
            <div class="footimage col-md-4 col-lg-4 col-sm-12 col-xs-12">
                <a href="http://website.com/" target="_blank">
                    <img alt="" class="footimager" src="http://placehold.it/350x95/" />
                </a>
            </div>
            <div class="footleft col-md-4 col-lg-4 col-sm-12 col-xs-12">
                <a class="def" href="javascript: void(0);"></a>
            </div>
            <div class="footright col-md-4 col-lg-4 col-sm-12 col-xs-12">
                <a class="abc" href="javascript: void(0);"></a>
            </div>
        </div>
    </div>
</body>

这无疑是网站设计的另一种思考方式，但是Bootstrap的文档非常清晰，并且有很多教程（确保它们是针对Bootstrap3的，而不是bootstrap2的。有一些很大的区别）

哦，不要用发布代码

麹高义

2023-03-14

有几种方法可以将移动/平板电脑设备与您的网站配合使用。

固定设计

创建跨所有格式通用的样式表。您的网站将在所有设备上显示相同，但此过程将是最简单的解决方案。

固定设计过程应主要使用百分比和最大宽度来创建根据设备宽度更改的内容。

优点

如果使用得当，此过程使用的资源最少，创建和修改速度更快。

骗局

如果您的网站有大量的内容在一个网页然后您的网站可以成为非常狭窄的较小的设备

响应性设计

如果你想让你的网站在不同的设备上以不同的方式被浏览，并且可以说是最佳的，那么你需要一个响应性强的设计。这可以通过使用动态样式表或为不同的设备使用多个样式表来实现。

优点

一个非常通用的网站，可以显示独特的和最佳的基础上查看设备。

骗局

更大或更多的资源和稍长的加载时间（取决于设计）。更长的开发和修改时间。

创建响应级联样式表

使用“设置宽度”不再实用，因为存在简单到多种不同的尺寸。答案是一切都灵活。

使用视口元标记（如示例中所示）以访问网站的设备为目标。

由于大多数流行的移动浏览器支持视口元标记，并且成千上万的网站使用它，因此对视口元标记的需求非常明显。

使用媒体查询。

媒体查询允许您为特定的屏幕宽度编写单独的规则。

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

使用Javascript。

除了bootstrap之外，一个好的javascript解决方案是jQuery mobile，它通过为你做这些工作来节省设计响应站点的时间和精力。你不需要知道或编辑任何javascript使用它。

规格

现在我们有了选择，让我们看看你的具体问题。你的网站看起来已经很有反应了。并且采用固定式设计，为手机和PC提供了良好的布局。

更改您的媒体查询（没有括号就无法工作）

从

@media screen and max-width 600px {
    .headimager {
        display: none;
    }
}

@media screen and max-width 450px {
    .footimager {
        display: none;
    }
}

到

@media screen and (max-width:600px) {
    .headimager {
        display: none;
    }
}

@media screen and (max-width:450px) {
    .footimager {
        display: none;
    }
}

我建议不要使用表格（#渐变样式）。一个简单的100%div（#container）可以实现浮动或%width嵌套元素。此外，在容器中的文本不会自动换行，没有间距的css wordwrap:break；

除此之外，没有其他值得注意的问题，但如果您需要特定的更改，请添加注释。

类似资料：

JavaScript动态修改网页元素内容的方法

本文向大家介绍JavaScript动态修改网页元素内容的方法，包括了JavaScript动态修改网页元素内容的方法的使用技巧和注意事项，需要的朋友参考一下本文实例讲述了JavaScript动态修改网页元素内容的方法。分享给大家供大家参考。具体分析如下：下面的JS代码当用户点击提交按钮后，通过元素的textContent或者innerHTML动态指定元素的内容希望本文所述对大家的javascr
ios 获取或修改网页上的内容

本文向大家介绍ios 获取或修改网页上的内容，包括了ios 获取或修改网页上的内容的使用技巧和注意事项，需要的朋友参考一下 UIWebView是iOS最常用的SDK之一，它有一个stringByEvaluatingJavaScriptFromString方法可以将javascript嵌入页面中，通过这个方法我们可以在iOS中与UIWebView中的网页元素交互。 stringByEvaluatin
向下不兼容改动

4.4.12 该版本支持了Websocket帧压缩，修改了push方法的第三个参数为flags，如未设置strict_types，代码兼容性不受影响，否则会出现bool无法隐式转换为int的类型错误，此问题将在v4.4.13修复 4.4.1 注册的信号不再作为维持事件循环的条件，如程序只注册了信号而未进行其他工作将被视为空闲并随即退出（此时可通过注册一个定时器防止进程退出） 4.4.0 和PHP
如何在Bootstrap 3的移动/平板电脑视图中隐藏某些内容？

我的转盘滑块中有一个按钮，我希望在桌面上显示该按钮，但在移动/平板电脑设备上隐藏该按钮：http://www.doorsets.org.uk/index.php 这在Bootstrap 3中可能吗？我知道我可以根据设备明显地更改列，但我不清楚如何根据设备隐藏/显示部分。如果您能提供任何建议，我们将不胜感激。另外，你有没有推荐一个好的Bootstrap3论坛？非常感谢NJ
如何动态更改网页标题？

问题内容：我有一个网页，该网页实现了一组标签，每个标签显示不同的内容。选项卡单击不会刷新页面，而是在客户端隐藏/取消隐藏内容。现在，需要根据页面上选择的选项卡来更改页面标题（出于SEO的原因）。这可能吗？有人可以提出一种解决方案，以通过javascript动态更改页面标题而无需重新加载页面吗？问题答案：更新：根据SearchEngineL上的注释和参考，大多数网络爬虫将为更新的标题编制索
跨平台兼容

说明由于在跨端开发中，必不可少的会遇到不同端需要有不同实现的情况。参考滴滴chameleon中的多态，megalo中实现了类似的跨平台兼容方案。需要使用时，请保证@megalo/target的版本号大于或等于0.7.2。 js的跨平台兼容 megalo中下面两种形式的引用会被特殊处理： [path-to-name]/[name]/index.mpjs [path-to-name]/[name]

修改网页，使其更兼容移动/平板电脑

共有3个答案

相关问答

相关文章

相关阅读

相关工具

相关文档