淘宝网触屏版怎么上不了
发布网友
发布时间：2022-04-21 14:01
共3个回答
懂视网
时间：2022-05-13 11:59
对于pc端网页设计师来说，移动端的网页制作，我之前只是简单的加了一个
然后再根据实际预览效果，对一些比例或者清晰度问题进行调整，以达到最佳效果。当然，这可以说只是为了应付工作。
最近工作告一段落，就有想法系统学习一下移动端网页。因为已经有一定基础，所以最快的学习方法，无异于肢解一个现成的移动端网站。
而淘宝网触屏版应该会是个不错的选择！
本学习笔记都是xh本人根据网络资料和自身理解写成，如有不对之处，请在评论处指出，我会及时修改，多谢。
以上（都是废话）。
所谓肢解，必须是一行行解剖学习下去！
所以，我在第二行便遇到了一个知识点：dpr。
dpr：设备像素比(devicePixelRatio)。
其定义：
window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
公式表示就是：window.devicePixelRatio = 物理像素 / dips
具体详细介绍资料：
鑫空间的博文（2012年）：http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/
JS调用方法：
淘宝网触屏版的应用：
一、用chorme调试的结果：
（1）apple iphone 5 ：
（2）apple iphone 6 plus ：
（3）google Nexus 4 ：
二、分析：
一开始接触移动端的时候，我就已经学习到viewport是规定屏幕缩放比例的。
那根据以上截图，可以得出，淘宝网触屏版是根据不同的dpr来设置font-size和viewport。
这其实有点难理解。因为我之前的从未用过dpr，viewport也一直设为1，font-size也都是按pc端的经验在12到20之间徘徊。
这里只能暂时理解为：淘宝为了根据不同设备的dpr使当前清晰度达到最高，而做的适配。
html和body里都有font-size。但是网页的font-size显然是根据内层的body的设置。
观察发现，其规律是 dpr:font-size=1:12 ；
按照此规律的设置具体会有什么利弊，还有待挖掘，不过淘宝用了，必然有其过人之处吧=，=
而设置height和data-spm的用处不是本文内容，以后再研究吧~
End、小小的宣传：
模板世界（www.templatesy.com），分享、下载最新最全的网站模板。
热心网友
时间：2022-05-13 09:07
重装一下。
1、首先在浏览器中搜索“淘宝网触屏版”，然后找到具体的网站，通常在自然排名的首位。
2、然后点击淘宝网触屏版的网址，点击进入触屏版H5网址。在这里就可以访问触屏版淘宝
3、然后在当前页面按键盘上的F12键，再点击手机图标，就可以实现浏览器打开手机端效果。
4、然后输入你的账号密码，即可登陆成功。
热心网友
时间：2022-05-13 10:25
一开始触屏版就是为webkit核心浏览器设计的，换句话说就是为Android和iOS而设计的。
问题是从CSS文件可以看出，所有的CSS3属性都被加上了-webkit标记，也就是说，所有的CSS3样式只对webkit核心的浏览器起效。
所以说并不是WP或IE的问题，在Android和iOS上如果使用Firefox或旧内核的Opera浏览器都是不能正常访问的。
经过两次批量替换，在本地服务器上部署访问就完全正常了，从下载页面到修正部署花费时间不到3分钟，可见修正的成本是十分低廉的，就看淘宝是否愿意做了。
为什么淘宝要这样做呢？
下面是臆想：
淘宝在开发触屏版页面时，市面上90%以上的智能手机都是Android和iOS，很巧的是两者的默认浏览器内核都是webkit，于是开发人员们随便聊了聊，一拍脑袋“干脆就完全为webkit核心开发吧~不用考虑兼容性还可以节省零点几KB的流量，其它手机（塞班？MTK？）就让它们用老的去吧~~”
项目经理只知道有苹果和安卓，不知道什么是webkit，于是拿着手上的iPhone滑了滑旧版页面，假装思考了一下，然后同意了，程序员们心理暗爽：“嘿嘿嘿可以多睡几天觉了~”
没有一个人想到手机上居然还有Firefox，更别提还有个使用IE的windows phone系统，除了一个刚入职的小伙子，坐在角落默默地把玩着手上的Omnia 7，不敢多做声。
不过既然淘宝说5月开始就要停用旧版页面，到时候应该会对触屏版做一些优化，还是期待一下万能的淘宝吧！
谢谢采纳，祝楼主健康，万事如意
很高兴为您解答
参考：百度资料
