商业源码 网站设计时如何考虑适配移动设备？
织梦pc电脑端自动匹配m移动手机站代码
首页：
<meta http-equiv="mobile-agent" content="format=xhtml;url={dede:globalcfg_mobileurl/}/">
<script type="text/javascript">
if(windowlocationtoString()indexOf('pref=padindex') != -1){}else{if(/AppleWebKitMobile/itest(navigatoruserAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/test(navigatoruserAgent))){if(windowlocationhrefindexOf("mobile")<0){try{if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/itest(navigatoruserAgent)){windowlocationhref="{dede:globalcfg_mobileurl/}/";}else if(/iPad/itest(navigatoruserAgent)){}else{}}catch(e){}}}}
</script>
栏目页
<meta http-equiv="mobile-agent" content="format=xhtml;url={dede:globalcfg_mobileurl/}/listphptid={dede:fieldid/}">
<script type="text/javascript">
if(windowlocationtoString()indexOf('pref=padindex') != -1){}else{if(/AppleWebKitMobile/itest(navigatoruserAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/test(navigatoruserAgent))){if(windowlocationhrefindexOf("mobile")<0){try{if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/itest(navigatoruserAgent)){windowlocationhref="{dede:globalcfg_mobileurl/}/listphptid={dede:fieldid/}";}else if(/iPad/itest(navigatoruserAgent)){}else{}}catch(e){}}}}
</script>
文章内容页：
<meta http-equiv="mobile-agent" content="format=xhtml;url={dede:globalcfg_mobileurl/}/viewphpaid={dede:fieldid/}">
<script type="text/javascript">
if(windowlocationtoString()indexOf('pref=padindex') != -1){}else{if(/AppleWebKitMobile/itest(navigatoruserAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/test(navigatoruserAgent))){if(windowlocationhrefindexOf("mobile")<0){try{if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/itest(navigatoruserAgent)){windowlocationhref="{dede:globalcfg_mobileurl/}/viewphpaid={dede:fieldid/}";}else if(/iPad/itest(navigatoruserAgent)){}else{}}catch(e){}}}}
</script>
px：像素
em：一个 M 的宽度（面试：一个字的宽度）
rem：root em 根元素（ <html> ）的 font-size //oppo个别机型不适用
vh：view height，视口高度 100vh === 视口高度
vw：view width，视口宽度 100vw === 视口宽度
浏览器默认 font-size:16px;
Chrome浏览器默认最小字号为12px：font-size:12px;
所以一般情况下，rem 的font-size不要小于12px;
rem 就是 <html> 元素的 font-size，默认为 16px;(浏览器默认font-size)
rem和em 的区别：
1meta viewport
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
2媒体查询
更具查询结果选择不同的css样式,设置屏幕最大宽度，如果页面范围在这个宽度内就可以显示对应的CSS，以最大500为例
<style>
@media (max-width: 500px) {
}
</style>
3动态 rem方案
一切单位以屏幕宽度为标准，就能完美还原设计稿。
动态REM思路：动态rem 采用整体缩放的思想，在页面渲染之前，使用JS获取设备宽度并设置rem(1rem == html font-size == viewport width)，之后的布局单位全部使用rem来实现整体缩放。
在使用动态 rem 布局的移动端页面中，很小的宽度如border-width 依然使用px，因为即使使用rem，当rem小于1px 时，依然会被浏览器当做1px 使用。
内容组织
为移动设备设计页面时，首先应该考虑的是组织网站内容以满足移动用户的需求。满足各种设备的分辨率。保证体验效果。
移动用户的需求可能会有所不同，所以值得考虑专门为移动设备进行设计。不能直接从PC网站上直接复制，因为你复制的说不定只是为PC设计的。
菜单格式是PC和移动设备之间的主要区别。在PC上通常会有许多类别和子类别的大菜单。可以读取这些菜单中的文本，可以轻松点击文本链接的桌面用户。但是移动端不行，因为移动端屏幕较小，所以移动端的菜单会折叠，菜单会选择垂直对齐，在用户缩小类别时展开。
一些网站都会有表单提交功能，一些网络营销公司，会花费大量的时间来优化网络表单。以实现大量的转换。表单的设计是影响转化的重大因素。同样在移动设备，表单需要专门设计，方便移动用户填写。
Pc端多数网站是有动态效果和交互体验的，但移动端网站很难实现。现在很多网站使用的是html5技术，不需要做两个版本，可以自动适应不同的终端，展示最为合适的页面尺寸。动态效果和交互体验也可以做得很棒。
页面数据同步，我觉得你到不必担心，因为你的数据是从数据库中读取出来的，这样的话，你的数据肯定是以数据库为准，那么这些数据，必然是同步的。
自动跳转，我是这样考虑
1，在你整站首页上判断来访问域名的代码，如果来访域名是你指定的M开头的二级域名，那么，直接跳转到手机版。这是比较简单的方案。但并不智能。
2，同样在整站首页上判断，这次判断浏览器类型，如果是常规ANDRIOD，SAFARI，UC这些，那么直接跳转手机版。这个相对更智能，但也更麻烦。
有的，在“模块”哪里添加手机WAP浏览插件，即可。添加完会有带M的目录。
至于模板，一般都是在default目录里面的。
建议自己开发一个手机端好点。比织梦自带的好点。
第二种 rem响应式布局方案(等比缩放)：
使用的时候按照1920的设计稿来做。100px=1rem，font-size设置成100px; 750px的设计稿 1rem = 100px 设置屏幕超过2560及以上，就固定1rem = 200px， 宽度小于600及以下，就固定1rem = 32px
第三方库用的一般是使用px单位，无法使用rem适配不同设备的屏幕。
解决办法：使用px2rem-loader插件将第三方ui库的px转换成rem单位。
移动端设计稿一般都是750px的，所切的图就是@2x 的，在一些DPR为30的手机上使用@2x大多数也会显示的很清晰，这样就是为什么设计稿要750px的
0条评论