Getskel.com-Firefox mobile无法将模板识别为mobile
我使用Getskel.com作为响应框架。除了android上的Firefox mobile,它在所有设备和浏览器上都能完美运行。使用ADP.exe调试它时,我发现该模板被识别为桌面而不是移动模板。这是我的skel.init:Getskel.com-Firefox mobile无法将模板识别为mobile,firefox,mobile,responsive-design,Firefox,Mobile,Responsive Design,我使用Getskel.com作为响应框架。除了android上的Firefox mobile,它在所有设备和浏览器上都能完美运行。使用ADP.exe调试它时,我发现该模板被识别为桌面而不是移动模板。这是我的skel.init: skel.init({ reset: 'full', breakpoints: { 'global': { range: '*', href: '/templates/responsivegs/css/style.css' },
skel.init({
reset: 'full',
breakpoints: {
'global': { range: '*', href: '/templates/responsivegs/css/style.css' },
'desktop': { range: '737-', href: '/templates/responsivegs/css/style-desktop.css', containers: 1200, grid: { gutters: 25 } },
'1000px': { range: '737-1200', href: '/templates/responsivegs/css/style-1000px.css', containers: 1000, grid: { gutters: 20 }, viewport: { width: 1080 } },
'mobile': { range: '-736', href: '/templates/responsivegs/css/style-mobile.css', containers: '100%!', grid: { collapse: true, gutters: 20 }, viewport: { scalable: false } }
},
有人遇到过同样的问题吗?是的,我也遇到过同样的问题,我注意到在更新版本的skel.js中,媒体识别被更改为
// Global.
global: {
href: 'css/style.css',
containers: 1400,
grid: {
gutters: ['2em', 0]
}
},
// XLarge.
xlarge: {
media: '(max-width: 1680px)',
href: 'css/style-xlarge.css',
containers: 1200
},
// Large.
large: {
media: '(max-width: 1280px)',
href: 'css/style-large.css',
containers: 960,
grid: {
gutters: ['1.5em', 0]
},
viewport: {
scalable: false
}
},
// Medium.
medium: {
media: '(max-width: 980px)',
href: 'css/style-medium.css',
containers: '90%',
grid: {
zoom: 2
}
},
// Small.
small: {
media: '(max-width: 736px)',
href: 'css/style-small.css',
containers: '90%',
grid: {
zoom: 3,
gutters: ['1.25em', 0]
}
},
// XSmall.
xsmall: {
media: '(max-width: 480px)',
href: 'css/style-xsmall.css',
grid: {
zoom: 4
}
}
我找到了解决办法!我认为这是旧版本skel.js的一个bug 尝试更改:
'1000px': { range: '737-1200', href: '/templates/responsivegs/css/style-1000px.css', containers: 1000, grid: { gutters: 20 }, viewport: { width: 1080 } },
在:
'1000px': { range: '(min-width: 737px) and (max-width: 1200px)', href: '/templates/responsivegs/css/style-1000px.css', containers: 1000, grid: { gutters: 20 }, viewport: { width: 1080 } },