Question

我正在开发非洲功能手机的网络应用程序（屏幕尺寸通常为128 x 160 px（1.80“）的非智能手机）。

我需要学习如何使网站响应，或者正确显示屏幕尺寸这么小。我知道常规的CSS查询不适用于功能手机，所以还有其他任何建议吗？

这：

https://developers.google.com/webmasters/mobile-sites/mobile-seo/other-devices/feature-phones?hl=en

是我在这个主题上读到的内容，但是对于我来说理解我的CSS文件（目前正在使用bootstrap）所做的更改是模糊的。真的很感谢您的帮助！< / p>

Answer 1

您可以尝试使用预制表格的基础和具有预定义css属性的部分： http://www.foundation.zurb.com/

或者您可以使用百分比width: 15%。因此，它将获得您设备的指定百分比，并根据该值计算正确的大小。

此外，您列出的网站所说的内容（谷歌），它会根据您的设备创建不同的CSS文件。因此，当您使用<link>设置CSS文件时，可以使某些设备使用某些文件：（摘自谷歌）：

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" />

Answer 2

要使网站响应，我们必须使用CSS3 @media查询。针对不同的屏幕尺寸编写@media个查询。但@media查询并不支持旧版浏览器。在你的情况下（非智能手机）@media不起作用。我建议为http://m.website.com等手机创建子域名，如果用户打开http://website.com，则使用javascript重定向到移动版网站。

@media only screen 
  and (min-device-width: 128px) 
  and (max-device-width: 160px) 
 {

/* Put your CSS Code for small screen */
}

关于@media的一些有用的文章。

http://code.tutsplus.com/tutorials/quick-tip-a-crash-course-in-css-media-queries--net-14531

http://www.htmlgoodies.com/html5/tutorials/an-introduction-to-css3-media-queries.html

https://css-tricks.com/logic-in-media-queries/

http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

如何使网站对功能手机做出响应（屏幕非常小）

2 个答案: