网站移动兼容性

发布于 2024-09-19 08:46:06 字数 31 浏览 5 评论 0原文

如何制作既兼容桌面浏览器又兼容移动浏览器的网站?

How to make website that should compatibility with desktop browser as well as mobile browser?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

心房敞 2024-09-26 08:46:06

针对桌面和移动设备的替代 CSS 文件有一个技巧。因此,在 HTML 标头中实现:

<head>
<meta name="viewport" content="width=320" />
<link rel="stylesheet" href="mobile.css" type="text/css" media="only screen and (max-device-width: 480px)"/>
<link rel="stylesheet" href="desktop.css" type="text/css" media="screen and (min-device-width: 481px)"/>
<link rel="stylesheet" href="mobile.css" type="text/css" media="handheld"/>
<!--[if IE]>
<link rel="stylesheet" href="desktop.css" media="screen" type="text/css" />
<![endif]-->
</head>

然后,如果您需要移动设备和桌面设备的替代内容,请随意使部分 HTML 在桌面设备上可见并在移动设备上隐藏,反之亦然。

已在 iPhone 和 Android 上尝试过。请注意,仅在 ref 标签或 CSS 文件中指定“media="handheld"”并不能解决问题。 iPhone 并不认为自己是手持设备。

There's the trick with alternative CSS files for desktop and mobile. Implemented in HTML header thusly:

<head>
<meta name="viewport" content="width=320" />
<link rel="stylesheet" href="mobile.css" type="text/css" media="only screen and (max-device-width: 480px)"/>
<link rel="stylesheet" href="desktop.css" type="text/css" media="screen and (min-device-width: 481px)"/>
<link rel="stylesheet" href="mobile.css" type="text/css" media="handheld"/>
<!--[if IE]>
<link rel="stylesheet" href="desktop.css" media="screen" type="text/css" />
<![endif]-->
</head>

Then if you need alternative content for mobile and desktop, feel free to make parts of HTML visible on desktop and hidden on mobile, or vice versa.

Tried on iPhone and Android. Note that simply specifying "media="handheld"" in the ref tag or in the CSS file does not do the trick; iPhone does not consider itself a handheld.

高冷爸爸 2024-09-26 08:46:06

我假设你的意思是兼容。如果我更多地了解您想要实现的目标,我也许可以提供更多帮助。

基本上,由于移动设备种类繁多(其中大多数具有不同的浏览器功能、屏幕分辨率、尺寸等),您永远不会得到一个完全兼容所有移动设备的网站。某些设备总会出现问题。

然而,一个可能的解决方案是为不同类型的手机创建不同版本的网站(例如 iPhone 版本、诺基亚版本、黑莓版本等),并使用 PHP 和 PHP 之类的东西。 WURFL 检测移动浏览器类型并加载相应版本的网站。

我使用过 PHP 和WURFL 过去检测是否正在使用桌面或移动浏览器,并加载相应的移动或桌面浏览器地点。

I'm going to assume you mean compatible. and If I knew a little more about what your trying to achieve I may be able to be a bit more help.

Basically because of the wide range of mobile devices (most of which have different browser capabilities, screen resolutions, dimensions, etc) you will never get a website to completely compatible with all mobile devices. There will always be problems with some devices.

A possible solution to this however, is to create different versions of the site for different types of phones (for example a version for iphones, a version for nokias, a version for blackberrys, ect), and use something like PHP & WURFL to detect the mobile browser type and load the appropriate version of the site.

I have used PHP & WURFL in the past to detect if a desktop or mobile browser is being used, and load the appropriate mobile or desktop site.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文