2

这可能看起来很愚蠢，但我不确定除了更改 CSS 之外开发移动网站的基本构建块。我发现的所有文章都指向使用媒体查询开发新的 CSS 样式表以使其具有响应性。作为一名网络开发人员，我不禁认为我让自己变得非常困难。我可以澄清一些事情吗？

如果我要构建一个已经存在的桌面网站的移动版本，我是否会创建一个新的 html/php 文件并将其用作核心索引文件而不是原始文件，我的原因是链接的布局/顺序/按钮可能完全不同，所以我不确定如何将相同的代码用于桌面和移动设备。基于浏览器等具有完全不同的文件或不同布局的标准做法是什么？（类似于<!--[if IE 7]>，如果不是，它们如何更改顺序和内容？

如果我在 html/php 中使用更改，我如何让手机读取它而不是常规文件/代码？

如果这个问题太模糊，有人可以指点我一篇可靠的文章来回答这方面的问题。

4

3 回答 3

4

这是一个巨大的主题，答案并不总是相同的。有时最好在不同的 URL 和所有内容上提供您网站的移动版本，有时您最好制作一个页面并使用 CSS 和 Javascript 使其具有响应性。

如果您计划从根本上改变布局以使您以不同的方式编写 HTML，您将希望将其设置为单独的页面。CSS 可以很好地移动一些东西，但是如果你发现你正在使用 CSS 将你的网站变成一个完全不同的网站，你绝对应该考虑一个单独的页面。

大多数情况下，这只是使用您自己的判断力的问题 - 您的用户不会太在意您使用哪种方法，只要它有效。做任何让您作为开发人员的工作更轻松的事情！

希望这个答案不会太模糊 - 您可以通过谷歌搜索响应式与单独的移动网站来找到更多信息。 这是关于该主题的一个很好的案例研究。

于 2013-01-16T22:47:25.733 回答
3

阅读有关 Twitter Bootstrap 的信息。这是一个 CSS/JavaScript 插件，当应用于网站时，它会重新调整大小和重新组织以在 iPad、iPhone、android、Windows 等中工作。这是我所知道的将基本网站转变为移动设备的最简单和最有效的方法应用。

不确定这是否是您所追求的，但我前段时间从应用程序切换到引导程序并且它运行良好。

于 2013-01-16T22:49:36.433 回答
2

我想首先说我使用 jQuery Mobile 来构建我的网站。

jQuery Mobile“页面”结构经过优化以支持单个页面或页面内的本地内部链接“页面”。

该模型的目标是允许开发人员使用最佳实践来创建网站——普通链接无需任何特殊配置即可“正常工作”——同时创建标准 HTTP 请求无法实现的丰富的、类似原生的体验。

移动页面结构

一个 jQuery Mobile 站点必须以 HTML5 'doctype' 开头，以充分利用该框架的所有功能。（带有不理解 HTML5 的浏览器的旧设备将安全地忽略“doctype”和各种自定义属性。）在“head”中，对 jQuery、jQuery Mobile 和移动主题 CSS 的引用都是开始工作所必需的。

这是一个 jQuery 页面的示例。

这就是在 jQuery Mobile 框架中创建页面是多么容易。www.jquerymobile.com上的整个站点包含移动设备所需的所有任务栏、弹出窗口、菜单项等的完整列表。它还允许页面滑动和酷炫的 iphone“滑动”动作。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head> 
<body> 

<div data-role="page">

    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p>Page content goes here.</p>      
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

</body>
</html>

我强烈推荐给任何人，好像它具有如此多的多功能性和可用性。

问候，

-Epik-

于 2013-01-17T00:24:24.973 回答