网站到移动网站的转换 [英] Website to mobile website conversion

问题描述

我有一个简单的网页此处。

如果我想将它转换为手机网站，应该在我的手机上打开它时，我应该能够看到整个页面。

$ b $

 < meta name = b 
 
我试着将它添加到我的html代码中， viewportcontent =width = device-width; initial-scale = 1.0; maximum-scale = 1.0; user-scalable = 0;/> 
  

手机规格：任何支持手机的网页浏览， 320像素。不允许水平滚动。只有垂直滚动。

你能帮我解决这个问题吗？只是转换到移动网站的代码。我在网上尝试了一些解决方案，但似乎没有解决问题。

谢谢！ ：D

解决方案

我会开始关闭meta标签......它似乎与用户缩放这是不好的可用性。

我会说，如果你要为移动设备优化的网站，你将不得不重新思考你如何使用CSS。而不是以像素为单位声明宽度，请使用百分比。移动设备宽度在横向和纵向模式之间变化，但80％始终为80％。本文将引导您了解如何针对不同设备宽度开始设置不同的样式： http://www.alistapart.com/articles/responsive-web-design/

I have a simple webpage here.

If I want to convert it into mobile website, what should to my html or something such that when I open it with my mobile, I should be able to see the whole page in my screen.

I tried adding this to my html code... in head

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

Mobile specs : Any web browsing supporting mobile and am targetting a width of 320px. No Horizontal scrolling allowed. Only vertical scrolling.

Can you help me fix this bug? Just the code for converting to mobile website. I tried a few solutions online but didn't seem to work out.

Thanks! :D

解决方案

I would start with taking that meta tag off... it seems to be messing with the user's ability to zoom in and out of the page, which is bad usability.

I would say, if you're going for a site optimized for mobile, you're going to have to rethink how you're using CSS. Instead of declaring widths in pixels, use percentages. Mobile device widths change between landscape and portrait mode, but 80% is always 80%.

This article will walk you through how to start setting up different styles for different device widths: http://www.alistapart.com/articles/responsive-web-design/

这篇关于网站到移动网站的转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！