2017-09-05 91 views
-2

我正在尝试将我的移动用户和所有小设备用户重定向到我的移动版网站。 但我不喜欢更改我的网址。 像下面的例子,如何在不更改URL的情况下重定向到移动版网站?

桌面版本:domain.com(用现场的桌面版本)

移动版本:domain.com(与网站的移动版本)

+0

你可以通过'htaccess'重写URL做工作 – prasanth

+0

其中*是你的手机版本的网站?如果您不告诉我们您需要将*重定向到*的位置,我们无法给您一个准确的答案。您的手机版本是不同的网站还是桌面版本的一部分? – FluffyKitten

回答

0

感谢大家的评论我的问题。 现在,我写我的答案给自己,我发现我的问题的答案。

响应设计不是它的答案。你必须展示一个移动版本的网站,而不是网站的响应版本。所以使用@media() 没有用。

对于这个问题,您必须检测用户的设备在您的后端。例如在PHP中,您可以使用mobile-detect。 而且您可以检测到您的设备并显示该设备的模板。


此外,移动侦测有一个js版本。 click here 我希望你在这里找到你的答案。

3

重定向装置改变窗口位置。

因为你不想有一个单独的移动网站, 唯一可行的解​​决方案是使用一个良好的响应ui框架,如bootstrap。但在你提到wordpress的标签中,我感觉大多数wp主题实际上都是响应式的。

不管怎么说,如果你想设计一个响应site.or使用引导,或另一种选择是写所有使用媒体查询的CSS。 希望有所帮助。

+0

响应是件好事。 但是在一些网站,我们想改变所有的用户界面,所以需要不同的输出。 –

+0

它还是很简单的。只需在同一页面中将手机和桌面的html一起写入,并在您的CSS媒体查询中,将“display:none”设置为不属于该设备的所有元素。 – reevkandari

+0

用css在页面上隐藏大部分是不好的做法... 手机不需要隐藏部分,它浪费带宽和渲染时间。 –

0

您需要替换此“即时”网站的主题。

你可以用代码来执行,但它太长了,使用这个插件,而不是device theme switcher

0

网址都应该是相同的,他们是在他们的情况也是相同的。做得好 !

现在,为了自动呈现特定布局,请借助媒体查询。

参考

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

它们定义了特定的宽度范围内,只有拿起这些特定的风格。

所以你有很多工作要做。

这是一个最佳的工作方式,这被称为响应式设计。

你可以找到n没有相同的教程。但要实验只需要一个或两个媒体查询。

此外,阅读meta标签使挑写在样式表https://css-tricks.com/snippets/html/responsive-meta-tag/

好运那些媒体的质疑!

0

在WordPress上定制页面时,可以在左下角看到您的网站在手机或平板电脑中的样子。

此外,像Elementor这样的一些页面构建器允许您控制在哪些屏幕上显示哪些部分。

更好的方式来陈述您的问题的问题是,如何使页面响应?

当阅读关于Grid Systems时,您会惊讶于如何简单地改变div的方向,可以使用户体验差异巨大。 当使用框架,使用Grid Systems,Bootstrap是受欢迎的之一,你可以想象任何屏幕分为12列(网格)。然后,您可以通过添加类来指定div在每个屏幕大小上所占的多少部分。例如,<div class = "col-sm-6 col-lg-3" </div>将覆盖屏幕(水平)在小屏幕(6是12的一半)和四分之一的大屏幕。

这个操作背后的原因是为了让左右滚动更容易导航。 希望这篇文章能够让你了解一下你需要寻找什么来制作适合移动设备的网站。祝你好运!

相关问题