像这种布局在手机wap上做适配怎么写？
主要就是关键搜索框 在安卓上的宽度百分比和iPhone上的完全不一样，安卓上可能占40%左右 iPhone上（最小的那种）要占百分之50左右了，如果写大了 小屏幕手机上看直接被换行了，如果写小了，搜索框和菜单图标在大屏手机上就会离的很远，这种情况应该怎么解决？ps：做的一个手机wap，要适配所有手机，ios、安卓、横屏竖屏。
已有帐号？
无法登录？
社交帐号登录搜索：问题、网站、SEOer人名
百度怎么判断网站是不是手机wap网站的？？
我想给现有建立个wap版的，但是不知道百度是怎么判断网站是不是wap版本的呢？是根据网页宽度吗？
还是什么特殊标记？
如果我开发wap版本的话，比如确定是
那我要单独提交这个二级域名到百度吗？还是我在 上做程序判断，301到 还是怎么地？？小弟第一次做wap 还请指点！！
该问题谈及的网站是：
浏览: 7455发布于:
常用的办法：
1、pc网站每个页面代码中添加本页面对应的手机网站页面【单独给搜索引擎看的，对用户没有用】
以上也可以去百度站长工具提交下开放适配，就是提交pc页面和手机页面的对应关系
2、根据访问设备返回对应的页面，手机查看网站直接给手机网站，pc查看网站直接给pc页面。【为了用户配置的】
感谢您的邀请，在之前有个类似的问题，您可以去看看。
/question/8047
因为WAP站与WEB站都有属于自己的声明。搜索引擎是根据这个声明来判断网站类型的。
其实你的移动站点只是把你pc站的布局到手机上而已，因此可以按照三木的方法试试。
对，就是这个，其实不加这个声明也是可以的，百度可以自己识别，就像你不加meta标签百度也能自己提取一样。代码声明一下或者提交开放适配就是可能会更有利于百度抓取获给予排名。
不过做操作系统判定是很有必要的。总之，做好该做的，程序方面，和开放适配，其余的就不用担心了。如果很久还是没有排名再考虑其他因素。
服务器的区别，百度自己可以识别，即使你在网站的后台，或者域名解析里面直接把手机的网址绑定成一个顶级域名，，也无所谓，百度会根据服务器的请求，去分析，是电脑网页，还是手机的。所以这个你不用担心！
怎么判断有很多方法，程序实现，或者适配或者····
百度判断的不是哪个是手机站 也不是哪个是PC站 只是做了一个引导 引导百度去做匹配，去识别手机站，如果你在手机网址识别码上放的是PC站，百度照样认为他是手机站。照样去匹配。
30天内搜外会员都在讨论什么
seowhy54期学员
(8 个回答)
(8 个回答)
(15 个回答)
(57 个回答)
(48 个回答)
(19 个回答)
(18 个回答)
(15 个回答)
(9 个回答)
(0 个回答)
(0 个回答)
(0 个回答)
(4 个回答)
(2 个回答)
(0 个回答)
(1 个回答)
(1 个回答)
始于2007年 深圳市夫唯伙伴信息咨询有限公司 版权所有 | 粤ICP备号 | 粤公网安备0号2544人阅读
对于我们前端来讲，wap2.0开发无疑是对我们的一个考验，这个考验主要是考验我们对于重构方面的功底。下面主要分 UI、HTML、CSS、Javascript三方面给大家分享在wap2.0开发中的一些个人经验。&
兼容性方面
在介绍之前首先我得吐槽下wap2.0网页开发在兼容性上的事儿。
兼容性测试：比web浏览器还恐怖的手机浏览器
在这里，我拿我们传统的 web站点与wap2.0站点作对比，看看我们在兼容性测试中我们前端有多少活要干。
web站点兼容性测试
对于web网站，一般来说，目前我们需要兼容的是
1个操作系统（windows）X 4种浏览器（ie6、ie7、ie8、firefox）= 3种情况
要求高一点的web网站需要兼容的是
1个操作系统（windows）X 10 种浏览器（ie6、ie7、ie8、ie9、firefox3.6、firefox、chorme、opera、safari、遨游）+ 1个操作系统（mac） X 1种浏览器（safari）= 11种情况
wap2.0站点兼容性测试
做过wap2.0站点开发之后，你就会发现…IE6其实已经是很好的浏览器了，真的。
手机浏览器有多少种需要兼容
要做到比较好的兼容性，我们要兼容的手机浏览器至少有二十种情况（手机自带的浏览器+用户可安装的浏览器）
影响你wap页面整体效果的还包括：
手机型号操作系统浏览器类型屏幕尺寸颜色深度
还有两个更令人头痛的问题：
你没法使用css hack你也没法逐一去测试各浏览器的实际效果
在UI方面，由于不是我们前端负责的部分，在这里我就说一下我在开发过程中遇到的在UI上要注意的地方了
设计风格(色彩配色)
由于不同手机的颜色深度不一样，有的手机4096色，有的则1200w色，为了向下兼容颜色深度较少的手机，我们在UI设计的时候尽量简单为主，减少渐变特别是大范围的渐变色块的出现，避免在颜色深度不足的手机上出现颜色分层现象。
由于不同手机屏幕尺寸差异性较大，有180×120分辨率的，也有540×960分辨率的，所以在设计上应该尽量采取简单布局，尽量少出现左右布局，因为在wap2.0站点上面 左右布局是做不了自适应的。
公司ui决定我们的wap2.0站点最小分辨率为240x360px，小于这个分辨率的用户…自己就看着办吧。
以下所说的“大多数”是指在我们测试过的机型中，发生此类状况的手机占比达50%及以上，“部分”为20%到50%；“少数”为20%及以下。而这个概率也仅仅只限于我们所测试过的机型，虽然我们采集的样本尽量覆盖各种特征、手机，但并不代表所有手机的情况。
大多数手机不支持的
表单元素的“disable”属性
部分手机不支持的
&button&标签input[type=file]标签&iframe&标签
虽然只有部分手机不支持这几个标签，但因为这些标签在页面中往往具有非常重要的功能，所以属于高危标签，要谨慎使用。
少数手机不支持的
&select&标签：该标签如果被赋予比较复杂的CSS属性，可能会导致显示不正常，比如“vertical-align:middle”
我想说的是
在实际开发中，我们使用标签可以算是少了很多很多的选择了，因为，在调试中发现
&li&标签在部分手机上左侧那小点是默认保留的，而且设置 list-style:none 无效
这个影响的有，我们在web网站中用在列表，导航中的 ul & li 结构 不得不用其他结构替换掉。
在这里我就举个实际例子
这个是我们wap站点的导航部分。
原先在web上的结构是这样的
&li&搞笑&/li&
&li&动漫&/li&
&li&游戏&/li&
&li&娱乐&/li&
&li&原创&/li&
&li&影视&/li&
&li&音乐&/li&
&li&体育&/li&
在wap2.0站点上得改成
&span&搞笑&/span&
&span&动漫&/span&
&span&游戏&/span&
&span&娱乐&/span&
&span&原创&/span&
&span&影视&/span&
&span&音乐&/span&
&span&体育&/span&
然后第二个问题 就是要不要让导航自适应，就是说 如果手机屏幕足够大，能否考虑将8个导航文字，一列排过去，但是与ui那边讨论过之后决定使用居左排列2行的形式，即如果屏幕足够大，则会背景向右延伸，但导航文字距离保持不变。
关于当初定的以 240×360分辨率为最小分辨率所衍生的问题
这个问题出现在nokia手机上面，页面做出来之后在nokia 系统上面发现出来之后整个页面显得很小，320×480分辨率导航文字部分只占到手机屏幕宽度的一半左右，在百思不得其解之后，只好参考其他同类型网 站，发觉 激动网的 wap版本 用了个&viewport 属性，并把页面的初始大小为原来的1.4倍，即
&!-- html document --& &meta name=&viewport& content=&width=device- initial-scale=1.4; minimum-scale=1.0; maximum-scale=2.0& /&
这样 nokia 的 塞班用户 与 高端智能手机如 android 和 ios 用户就能看页面清晰些大些，而低端用户由于不支持 viewport属性，所以没影响。
放大之后图片变模糊解决方案
和产品部门说明原因之后，解决了。怎么解决？没得解决…
以下所说的“大多数”是指在我们测试过的机型中，发生此类状况的手机占比达50%及以上，“部分”为20%到50%；“少数”为20%及以下。而这个概率也仅仅只限于我们所测试过的机型，虽然我们采集的样本尽量覆盖各种特征、手机，但并不代表所有手机的情况。
大部分手机不支持的：
“font-family”属性：因为手机基本上只安装了宋体这一种中文字体；“font-family:”：对中文字符无效，但一般对英文字符是有效的；“font-style:”：同上；“font-size”属性：比如12px的中文和14px的中文看起来一样大，当字符大小为18px的时候你也许能看出来一些区别；“white-space/word-wrap”属性：无法设置强制换行，所以当你网页有很多中文的时候，需要特别关注不要让过多连写的英文字符撑开页面；“background-position”属性：但背景图片的其他属性设定是支持的；“position”属性；“overflow”属性；“display”属性；“min-height”和”min-weidth”属性；
部分手机不支持的：
“height”属性：对”height”的支持不太好，奇怪的是在我们的测试当中，仅仅只有很少部分手机不支持”width”属性；“pading”属性“margin”属性：更高比例的手机不支持”margin”的负值。
少数手机对CSS完全不支持；
我想说的是
在进入实际开发的时候，我发现其实还有一部分的手机不支持 float 属性，超级郁闷！
这样的话 一些左右布局 就不能用了。
Javascript方面
这部分测试相对不那么让人抓狂，要么干脆不支持，如果支持的话，对基本的dom操作、事件等支持度都还不错。但我们没有测试过很复杂的脚本。
在我们测试过的手机当中，支持（包括不完全支持）JavaScript的手机比例大约在一半左右，当然，对于我们来说，最重要的不是这个比例，而是要如何做好JavaScript的优雅降级
除了以上说写之外，还有一些不得不知道的小细节要注意的。
部分手机不支持png8和png24，所以尽量使用jpg和gif的图片部分手机对于超大图片，既不进行缩放，也不显示横下滚动条少数手机在打开超过20k的测试页面时，会显示内存不足
调试上的小建议
前端开发使用自己手机作为初始测试平台的童鞋们，我建议你们安卓&uc浏览器7.9，这样基本上可以将你高端手机很优雅地变为半高端手机，能测出低端手机常见的bug出来。
一般手机测试我们可以下载一个&&来进行模拟，效果比较理想，要注意的就是当前页面的颜色深度， Opera Mobile Emulator 上的颜色深度直接是取电脑上的颜色深度，这个是和真机是不一样的。
然后就是关于手机上测试时令人抓狂的缓存问题，我建议为你修改过的样式文件，js文件给个版本号来减轻缓存的影响。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：39813次
排名：千里之外
原创：30篇手机wap网页自适应的实现方法
昨天中午Google进行了一次在线讲座，讲述自适应网页设计的概念和方法，维护同一个网页代码，即可使网站在多种浏览设备（从桌面电脑显示器到智能手机或其他移动产品设备）上具有更好的阅读体验，这里我将该讲座内容简要的整理一下。
1、在HTML头部增加viewport标签
在网站HTML文件的开头，增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度，且不进行初始缩放。代码如下：
& meta name="viewport" content="width=device-width,
initial-scale=1" /&
这段代码支持Chrome、Firefox、IE9以上的浏览器，但不支持IE8以及低于IE8的浏览器。
2、在CSS文件尾部增加针对不同屏幕分辨率的规则
例如使用如下的代码，可以让屏幕宽度低于480像素的设备（如iPhone等），网页侧栏隐藏中部内容栏宽度自动调节。以下代码针对Z-Blog，WordPress相关css样式的id标签名称只需修改一下即可。
&&@media screen and
(max-device-width: 480px) {
&#divMain{
&#divSidebar {
3、布局宽度使用相对宽度
网页总体框架可以使用绝对宽度，但往下的内容框架、侧栏等最好使用相对宽度，这样针对不同分辨率进行修改就方便。当然也可以不用相对宽度，那就需要在
@media screen and (max-device-width: 480px)
里面增加各个div的针对小屏幕的宽度，实际上更麻烦。
4、页面使用相对字体
在HTML页面上不要使用绝对字体（px），而要使用相对字体（em），两者换算关系是：em = px*16
，例如16px就等于1em。
5、图片自适应（非必要）
　　img标签的话，只需要设置 max-width: 100%;或width:100%; 语句为：img { max-width:
　　css加载的background-image如何自适应大小呢，其实CSS3中是可以实现的，添加如下语句：background-size:100%
根据上面讲述的几点内容，我针对我博客的CSS进行了一些修改，发现可以从iPhone手机浏览到体验更加的页面，但有一个问题没有解决，就是顶部导航栏navbar显示有问题，换行后被下面的文章盖住了，不知道怎样能更好地解决这个问题。
总之，根据上面四步进行修改的话，可以很简单地将一个网站修改为适合多种设备浏览的页面，这对于通过手机访问网站的用户来说，的确是一件好事。
&&&文章来自：月光博客
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。手机网站前端开发布局技巧
手机网站前端开发布局技巧
手机网站前端开发布局技巧
热度 4已有 643 次阅读 17:51
|个人分类:|
在 此所说的移动平台前端开发是指针对高端智能手机（如Iphone、Android）做站点适配也就是WebApp，并非是针对普通手机开发Wap 2.0，所以在阅读本篇文章以前，你需要对webkit内核的浏览器有一定的了解，你需要对HTML5和CSS3有一定的了解。如果你已经对此有所了解， 那现在就开始往下阅读吧……1、首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用
第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码2、HTML5标签的使用在开始编写webapp时，哥建议前端工程师使用HTML5，而放弃HTML4，因为HTML5可以实现一些HTML4中无法实现的丰富的WEB应 用程序 的体验，可以减少开发者很多的工作量，当然了你决定使用HTML5前，一定要对此非常熟悉，要知道HTML5的新标签的作用。比如定义一块内容或文章区域 可使用section标签，定义导航条或选项卡可以直接使用nav标签等等。3、放弃CSS float属性在项目开发过程中可以会遇到内容排列排列显示的布局(见下图)，假如你遇见这样的视觉稿，哥建议你放弃float，可以直接使用display:
4、利用CSS3边框背景属性看看这样一个按钮这个按钮有圆角效果，有内发光效果还有高光效果，这样的按钮使用CSS3写是无法写出来的，当然圆角可以使用CSS3来写，但高光和内发光却无法使用CSS3编写，这个时候你不妨使用-webkit-border-image来定义这个按钮的样式。-webkit-border-image就个很复杂的样式属性，你一开始可以无法快速理解，建议你阅读一篇5、块级化a标签请保证将每条数据都放在一个a标签中，为何这样做？因为在触控手机上，为提升用户体验，尽可能的保证用户的可点击区域较大。6、自适应布局模式在编写CSS时，我不建议前端工程师把容器（不管是外层容器还是内层）的宽度定死。为达到适配各种手持设备，我建议前端工程师使用自适应布局模式 （支付宝 采用了自适应布局模式），因为这样做可以让你的页面在ipad、itouch、ipod、iphone、android、web safarik、chrome都能够正常的显示，你无需再次考虑设备的分辨率
发表评论：
TA的最新馆藏