在平板电脑上显示完全响应式网站的桌面版本 [英] Showing the desktop version of a fully responsive website on tablets

问题描述

如何创建一个完全响应的网站(即流体")，而该网站最终不会在平板电脑上显示狭窄的移动"版本? (通常，网站的移动版本在设计时要牢记大拇指.这是非常基本的内容，通常是单列，并不真正适用于平板电脑等大型移动设备.)

How does one go about creating a fully responsive site (ie. 'fluid') that doesn't end up displaying the narrow "mobile" version on a tablet? (Usually the mobile version of a website is designed with thumbs in mind. It's very basic, usually single column, and isn't really suited to larger mobile devices like tablets.)

即使您已将所有内容设计为可以按比例缩放到每个宽度，您仍然需要viewport设置来告诉用户的手机以正确的宽度显示内容...但是此设置似乎也受到了尊重平板电脑.

Even if you've designed everything to scale gracefully to every width, you still need the viewport setting to tell a user's phone to display the content at the right width... but this setting appears to also be honoured by tablets, too.

我意识到您可以使用一种检测解决方案(例如移动检测)，但是它并不是很流畅(尽管我假设您可以使用移动检测"在检测到手机的情况下插入viewport元标记).是否有更好的方法让平板电脑显示台式机版本?

I realise you can use a detection solution (like Mobile Detect) but then it's not really fully fluid (although I suppose you could use Mobile Detect to insert a viewport meta tag if a mobile phone is detected). Is there a better way to get tablets to display the desktop version?

我觉得我错过了一个非常明显的把戏！

I feel like I'm missing a very obvious trick!

推荐答案

在CSS标准中采用后应如何工作:

在CSS中使用@media查询以及@viewport CSS标记，而不是meta视口标记.有关如何执行此操作的很好的解释:

Use @media queries in CSS, along with the @viewport CSS tag, instead of the meta viewport tag. There's a good explanation of how to do this here:

上述链接中的示例:

@media (max-width: 699px) and (min-width: 520px) {
  @viewport {
    width: 640px;
  }
}

您可以使用它在较窄和较宽的设备上设置不同的视口.

You could use this to set different viewports on narrower and wider devices.

但是就目前而言，似乎JavaScript是唯一的方法:

您可以侦听onResize事件并检查屏幕的宽度，然后相应地在DOM中调整视口元标记.

You can listen to the onResize event and check the width of the screen, and then adjust the viewport meta tag in the DOM accordingly.

请参见 http://www.webdevdoor.com /response-web-design/change-viewport-meta-tag-javascript

这篇关于在平板电脑上显示完全响应式网站的桌面版本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！