代码之家 › 专栏 › 技术社区 › meleyal

隐藏移动版网站内容的最有效方法是什么?

mobile performance css javascript

meleyal · 技术社区 · 15 年前

我正在开发一个大型网站的移动版。整个网站上有很多内容是手机不需要的。

最好的办法是什么? i、 e.什么会使浏览器的工作量最少,从而保持响应速度?

jQuery的 .remove() 方法,例如(未测试):

var elements_to_remove = [
  '#sidebar',
  '#footer',
  '#etc'
];

$.each(elements_to_remove, function() {      
  if ($(this).length > 0) {
    $(this).remove();
  }
});

我看到的.remove()的优点是,元素实际上是从DOM树中删除的,从而减少了内存使用。

之前准备好了吗?(即在制作DOM树时)。

提供一个定制的移动版本不是一个选项,它应该与现有的内容/be一起工作 'responsive'

5 回复 | 直到 15 年前

James Goodwin 15 年前

最有效的方法是首先不在页面上包含内容。

Lèse majesté 15 年前

Both HTML and CSS provide ways of doing this without JavaScript .

<link rel="stylesheet" href="screen.css" media="screen"/>
<link rel="stylesheet" href="handheld.css" media="handheld"/>

或者如果要使用单个样式表:

@media screen { /* rules for computer screens */ } 
@media handheld { /* rules for handheld devices */ }

@import :

@import "screen.css" screen; @import "handheld.css" handheld;

注: MVC 设计模式,则构建单个应用程序并根据用户是否通过 http://myapp.com http://mobile.myapp.com . 这意味着你的控制器和模型保持不变,你只需要为移动用户将访问的应用程序部分创建单独的视图。同样的技术将用于生成RSS提要或实现restapi。

新的不兼容移动浏览器的问题有点棘手。一方面,他们呈现这两个电子表格的原因是,他们觉得web开发人员对移动用户来说过于简化/剥离了他们的网站(这是有充分理由的,因为许多较旧、较不先进的移动浏览器仍在使用),而移动浏览器在呈现功能方面正在赶上桌面浏览器。但是,分辨率差异和屏幕尺寸仍然是一个问题。

桌面用户: screen.css
新移动用户: 屏幕.css 和 handheld.css
老移动用户: 荷载 掌机.css

CSS的级联特性意味着,通过一些仔细的测试,您应该能够满足所有3种人口统计。可能有一些 browser-detection tricks

Ofir 15 年前

如果你是为移动开发,你的首要任务是减少带宽。移动网站的响应性通常不太依赖于它的呈现速度,而是取决于它的加载速度(甚至没有提到用户经常为流量付费)。

另一方面,请记住手机上的小屏幕。创建一个更轻松的站点(无论是在whistles中的bells还是在每页的内容中)通常是有意义的。

T J 11 年前

有时候,与其严格遵守一套规则,比如干巴巴的,不如务实一点。

-1

Mic 15 年前

node.innerHTML = '';
node.parentNode.removeChild(node);

您可以将这些命令放在BODY标记末尾的SCRIPT标记中。

推荐文章

sadiq shareef · 即使更新了我的苹果应用程序网站关联文件,iOS应用程序也不会在点击网址时启动

5 月前

Enki · MAUI码头布局

10 月前

Sanjay TM · 如何在移动应用程序中为Instagram和YouTube Shorts实现“NoScroll”阻止程序?

1 年前

Xenomy · 添加新任务会重复UITableView中的现有任务

1 年前

Filipe José · React Native TextInput-失去焦点后移动到输入的开头

1 年前

Leong · 滚动时Flutter容器重叠

1 年前

ÐÐ°Ð·Ð°Ñ ÐÐ°ÑÑÐ¸Ð½ÐºÐ¾ · Flutter中的StateError

1 年前

Alireza · CollectionView在.net maui中使用延迟

1 年前

Daniel Omotoso · 由于JAXB.unmarshal(),Android应用程序构建失败

1 年前

optimus · 无法读取null的属性“decode”:react native pure jwt

1 年前