Question

我正在使用Gatsby构建一个Web应用程序，该应用程序需要在移动浏览器中加载使用移动ui库构建的单独布局，并在桌面浏览器中打开时加载与另一个ui库不同的布局。

我应该如何在根（应用程序）组件级别实现这一目标？

谢谢

Answer 1

我认为您可以尝试wrapPageElement in gatsby-browser.js and gatsby-ssr.js，并根据浏览器的高度返回不同的布局：

#Calculating numeric solution ($$ \frac{dx}{dt} =  0.2 x $$)
fefunction<-function(x){
  ans<-0.2*x
  return(ans)
}
Tmax<-1 #length of time
dt<-0.1 #time step
numsteps<-Tmax/dt #number of steps
y<-rep(0,numsteps+1) #pre-allocating y
time<-seq(0,Tmax,dt) #setting up time vector
y[1]<-5 #initial value for the numeric solution
for(i in 1:numsteps){
  #forward Euler
  y[i+1]<-y[i]+dt*fefunction(y[i])
}
print(y[2]) #Numeric solution: 5.1

#calculating exact solution: $x(t) = e^{0.2t}x(0)$
exact<-function(t,x){ 
  ans<-exp(0.2*t)*x
  return(ans)
}
Tmax<-1 #length of time
dt<-0.1 #time step
t<-seq(0,Tmax,dt) #setting up time vector
numsteps<-Tmax/dt #number of steps
sol1<-rep(0,numsteps+1) #pre-allocating the solution
sol1[1]<-5 #initial value for the exact solution
for(i in 1:numsteps){
  #exact solution
  sol1[i+1]<-exact(t,sol1[i])
}
error<-sol1[1]-y[2]
print(error)

这很棘手，因为在服务器端生成期间，您需要默认布局，这可能会（或可能不会）导致错误的行为？我不确定。

一个安全的选择是为您的应用生成移动版本和桌面版本，然后检测浏览器大小/在const React = require("react") const Layout = ... const MobileLayout = ... exports.wrapPageElement = ({ element, props }) => { // a made up hook to detect browser size, implement your own const isMobile = useDetectMobile() return ( isMobile ? <MobileLayout {...props}>{element}</MobileLayout> : <Layout {...props}>{element}</Layout> ) }中键入并相应地重定向。

根据Gatsby中的屏幕尺寸切换布局

1 个答案: