[英]How Should I load my mobile content first if viewed on mobile?
I have a page which renders well in desktop,whose markup is totally different from mobile's markup,as design is different on both. 我有一个页面可以很好地呈现在桌面上,其标记与移动设备的标记完全不同,因为两者的设计都不同。
I add extra <div>
in my existing desktop markup. 我在现有的桌面标记中添加了额外的
<div>
。
I use media-queries for toggling from desktop to mobile,by hiding mobile content if viewed in desktop(width > 1024) and vice-versa. 我使用媒体查询从桌面切换到移动设备,方法是隐藏移动设备内容(如果在桌面设备上查看(宽度> 1024),反之亦然)。
I also use two different meta tags for mobile and ipad. 我还为移动设备和ipad使用了两个不同的meta标签。
For mobile: for removing pinch effect(zoom in/out) 对于手机:用于消除捏效果(放大/缩小)
For ipad: for allowing pinch effect(zoom in/out) 对于ipad:允许捏效果(放大/缩小)
I add this meta tags through javascript which adds meta for mobile if it is mobile and meta for ipad if tablet 我通过javascript添加了此meta标签,如果是移动设备,则添加了移动设备的元数据,如果是平板电脑,则添加了ipad的元数据
Now on when page viewed on mobile,desktop version loads for few seconds and after that mobile version is visible. 现在,当在移动设备上查看页面时,桌面版本会加载几秒钟,并且在该移动版本可见之后。
Is it possible that i should be able to view my mobile version first, or when viewed on mobile just hide the desktop version?? 我是否应该能够首先查看我的移动版本,或者在移动设备上查看时仅隐藏桌面版本?
Here is My javascript code to toggle meta: 这是我的JavaScript代码来切换meta:
var browserdetect = function() {
var ismobile = (/iphone|ipod|android|blackberry|opera|mini|windows\sce|palm|smartphone|iemobile|ipad|android 3.0|xoom|sch-i800|playbook|tablet|kindle/i.test(navigator.userAgent.toLowerCase()));
var istablet = (/ipad|android 3.0|xoom|sch-i800|playbook|tablet|kindle/i.test(navigator.userAgent.toLowerCase()));
var metaiphone = '<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0 maximum-scale=1.0, user-scalable=no">';
var metaipad = '<meta name="viewport" content="width=1300">';
if(ismobile) {
if(!istablet) {
if($('body').hasClass('responsive-page')){
$('head').append(metaiphone);
}
} else {
$('head').append(metaipad);
// console.log("tab");
}
}
}
You have gone all wrong about this. 您对此事完全错了。 You should serve your mobile clients only the mobile html&css if it's totally different than the desktop version.
如果移动html&css与桌面版本完全不同,则应仅为移动客户端提供服务。 You should detect the client on the server and decide there which html&css to send them (or redirect mobile clients to a different domain that has a mobile version).
您应该在服务器上检测到客户端,然后决定向其发送哪些html&css(或将移动客户端重定向到具有移动版本的其他域)。
The point of media queries is to modify the existing html you have to work on different devices. 媒体查询的重点是修改必须在不同设备上工作的现有html。 You should look at this article for a quick overview: http://learn.shayhowe.com/advanced-html-css/responsive-web-design
您应该查看这篇文章以获得快速概述: http : //learn.shayhowe.com/advanced-html-css/sensitive-web-design
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.