Question

我是一名新手网络开发人员，我正在建立一个适合移动设备的网站系统。我正在使用当前的Bootstrap来增加对它的响应，PHP5，MySQL和偶尔的Ajax / JQuery。

我最近遇到了JQuery Mobile。我一直在使用常规的JQuery / Ajax来加载内容而不刷新整个页面等。

我的问题是：

构建此类系统时，我应该考虑哪些事项？我是在正确的道路上，我目前使用的东西是否足够。我错过了什么吗？

普通的JQuery在手机上是否仍能正常工作？例如，此代码用于更改页面上的内容：

$('#content').load('content/main.php');

$('ul#nav li a').click(function() {
    var page = $(this).attr('href');
    $('#content'(.load('content/' + + '.php');
    });

Answer 1

听起来好像你走在正确的轨道上。

首先，您在该jQuery代码段中缺少一个文件名，但这与您关于该代码段的问题无关，也不存在。

$('#content').load('content/main.php');

$('ul#nav li a').click(function() {
    var page = $(this).attr('href');
    $('#content'(.load('content/' + someJavascriptVarShouldGoHere + '.php');
    });

简而言之，不，这不会改变。考虑在移动设备上使用网络，在大多数情况下，您使用的是Safari，Chrome或您喜欢的移动浏览器，它们保留了桌面版本的javaScript引擎。因此，您编写的所有javaScript和CSS都将保留相同的功能。如果您在开发过程中没有设置设备来测试您的网站，那么开发者控制台中的chrome移动仿真工具是一个很好的起点，但它无法使用真实设备进行测试。仿真始终只是一个充分的测试解决方案。

jQuery mobile适用于触摸功能，而不是响应能力，这是我所理解的你所询问的内容。

至于需要考虑的事项：

CSS媒体查询 http://css-tricks.com/css-media-queries/
自适应设计与定位视口尺寸您可以选择两条路径：建立一个可以扩展的网站相对于视口，或以某种方式构建您的CSS 视口断点布局更改为套件视口。两者都有效方法，但我使用目标方法取得了更大的成功。
首先考虑使用移动设备，提炼所有最重要，最相关的内容内容下来，只显示，并添加铃声和口哨作为你获得屏幕房地产。

有许多网站和教程可用于引导程序和良好的文档。我建议做一些谷歌搜索并深入研究bootstrap文档。

就内容和形式而言，我在组合使用Angular和bootstrap方面取得了很大的成功。他们在一起玩得非常好：angular-ui bootstrap module。最近我一直在构建角度站点，其中bootstrap作为站点的UI，php作为数据访问层，以RESTful服务的形式向应用程序提供内容。 [slim]（谷歌瘦身框架）是一个伟大的微框架，可以帮助您快速，轻松地设置RESTful端点和[PIP]（谷歌点子框架）是另一个小而易用的框架，可以帮助您构建您的服务器端处理和数据访问层

Answer 2

您应该考虑使用移动设备的浏览器模拟器，是的，jQuery几乎适用于所有移动设备。另外，我鼓励你注意一个php框架，它会对你有所帮助。

建立移动友好网站

2 个答案: