手机网站的宽度自适应

方法一：

在网页的<head>中增加如下这段代码，可以让网页的宽度自动适应手机屏幕的宽度。

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes” />

width=device-width ：#表示宽度是设备屏幕的宽度
initial-scale=1.0  ：#表示初始的缩放比例
minimum-scale=0.5  ：#表示最小的缩放比例
maximum-scale=2.0  ：#表示最大的缩放比例
user-scalable=yes  ：#表示用户是否可以调整缩放比例

方法二：

把页面最顶部类似下面这段代码：

<!DOCTYPE ……..>

替换为：

<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>

注：此方法在iPhone下横屏时宽度会超过屏幕宽度出现滚动条，解决方法就是加上方法一的代码。

时间： 2024-10-05 22:19:13

手机网站的宽度自适应的相关文章

怎么让手机网站自适应设备屏幕宽度？转自百度经验

手机或平板设备屏幕大小差距大,因此打开网页时宽度也不同,新做的手机网站如何能够自适应网页宽度,就有了一些难度,还好程序猿们想到了这一点,在代码里面做了如此设置,下面简单讲解一下. 工具/原料写代码软件,记事本或DW都可以手机或平板一台,做测试方法/步骤方法:在网页头部加上这样一条meta标签:<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.

外贸建站之自适应网站电脑手机网站不同JS效果区分写法代码分享

外贸建站之自适应网站电脑手机网站不同JS效果区分写法代码分享,今天给客户要求把网站Can Clip搞成自适应的,要求电脑跟手机上菜单展开采用不同的效果, 相信很多程序员都有遇到过这种情况,这里把我们的解决方案分享给大家. 1 if($(window).width()>768){ 2 3 //电脑PC端JS代码 4 5 } 对,没错,只需要给电脑端显示的代码用上这个,就可以了,大家可以根据自己的需要修改不同的宽度,我们在Porsche Piwis III项目中,将PC跟手机端显示的区分宽度设置的

手机网页宽度，图片宽度自适应

网页宽度页面box不要写宽度或 width:100% 之类的去掉头部加上下面代码: <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /> 图片宽度 <script type="text/javascript"> f

手机网站自适应

1.近自己做的手机网管的页面,在手机上显示的时候,总是要手动进行页面缩放,这样子一来.采用Opera和 safari 等手机浏览器的时候,页面变形得很厉害,第一次用领导到的Iphone的时候.页面字变得太小,要缩放才可以.参考了3g.163 Yahoo ,Live 的页面后,发现CSS并无太大的区别.所以不是的CSS的问题.因为在PC 上,用各种浏览器都进行了测试.有一个最关键的东西.加上了就没有问题了!<?xml version="1.0" encoding="utf

android手机旋转屏幕时让GridView的列数与列宽度自适应

无意中打开了一年前做过的一个android应用的代码,看到里面实现的一个小功能点(如题),现写篇文章做个笔记.当时面临的问题是,在旋转屏幕的时候需要让gridview的列数与宽度能自适应屏幕宽度,每个单元格之间还需要保留一定的间距.因为每款手机的屏幕宽度不都相同,我们在指定了单元格的宽度与间距之后,并不能确定每行中所能容纳的单元格数量,这个数量必须在运行时通过计算得出,同样,我们设置的单元格宽度和间距不能保证刚好容纳在屏幕宽度内,为了解决这个问题,设计了一个简单的算法,首先需要预先指定单元格的宽

HTML5手机网站开发页面宽度解决方案

相信大家都知道,现在市面上手机的屏幕尺寸多种多样,2.8寸.3.0寸.3.2寸.3.5寸.4.0寸.4.2寸.4.5寸等等,随之而来的手机分辨率也千差万别,有240*320像素.320*480像素.480*800像素.640*960像素等等,其中480*800像素和640*960像素是主流的,但智能手机的发展速度大家有目共睹,随着手机的发展,不同尺寸的手机会陆续出现,这就给手机网站的开发带来非常大的麻烦,如何让自己的手机网站在不同尺寸的手机都能完美展示,手机网站的设计稿要设计成多大才合适? 只要

移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )

序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; width: 80%; height: 0; padding-top: 80%; border-radius: 100%; border: 1px solid #000; box-sizing: border-box; // for .layout { height: 100%; } positi

使PC端网页宽度自适应手机屏幕大小

有时候我们会纠结PC页面在手机页面上无法正常显示,超出屏幕,有些内容看不到,现在又了下面的代码,可以做到自适应手机屏幕宽度: 在网页的<head>中增加一个meta标签: <meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes” /> 可以让网页的宽度自动适应手机屏幕的宽度. 其中:wid

移动平台3G手机网站前端开发布局技巧

本文转载至:移动平台3G手机网站前端开发布局技巧汇总 - 前端开发-武方博您或许正在或准备参与一个WepApp项目,您或许正在Google搜索mobile development相关的文章,您或许是一名专业的WEB前端工程师,您或许想学习Mobile前端开发方面的技术,如果您被我说中了,呵呵那么这篇文章将为您带来意想不到的惊喜!当您看到这篇文章时,哥已经默认认为您是一名资深的WEB前端工程师,如果您不是,可能您会遇见许多不理解或听不懂的专业术语或前端技术(包括 WEB.Mobile).但是