WebSite X5Help Center

 
Nektarios K.
Nektarios K.
User

Desktop and mobile design  en

Автор: Nektarios K.
Просмотрено 896, Подписчики 1, Размещенный 0  

Hi there,

I want to create a website in the following way
At the desktop, the A design of the website
At a tablet and mobiles the B design of the website.
How I can "call" the correct version depending on the visitor usage?

https://www.mieconsultancy.com

https://www.haraapartment.com

https://kontigallery.com

Regards,

Nek 

Размещено
6 Ответы - 2 Полезно
John S.
John S.
User

You could use a line of JS to check the width of the screen and then direct to a mobile version if screen narrower than xx - or the other way round.

Читать больше
Размещено От John S.
John S.
John S.
User

You could instead have a nice one-page site, that is good in both desktop and mobile.

On that page you tell the user that he/she can choose between a and b, and that if he does not choose it will happen automatically in xx seconds ( and then redirects according to screen width)

Then you have the A and B projects in subfolders. In each project you could have a menu item that leads to the a project if you are in B, and to the B project if you are in the A project.

Making it this way will let the user choose what he prefers. Maybe he does not want the site to change if he tilts his device from portrait to landscape - or the opposite.

Читать больше
Размещено От John S.
Claudio D.
Claudio D.
Moderator
Лучший пользователь месяца IT

in Pro version there is a function in Website that intercept the resolution and redirect automatically...

https://guide.websitex5.com/en/support/solutions/articles/44000796414-come-si-imposta-il-reindirizzamento-in-base-alla-risoluzione-del-dispositivo-

instead i prefere mantain only well designed website

---

nella versione Pro c'è una funzione nel sito web che intercetta la risoluzione e reindirizza automaticamente ...

io  invece preferisco mantenere solo un sito web / progetto ben progettato

Читать больше
Размещено От Claudio D.
Nektarios K.
Nektarios K.
User
Автор

Thanks for the guidance 

I was found the following code and i test it working perfect to android also to iphone 

Andoid

<script type="text/javascript"><!--if(screen.width <=699){ document.location ="mobile.html";}//--></script>

Iphone

<script language=javascript><!--if((navigator.userAgent.match(/iPhone/i))||(navigator.userAgent.match(/iPod/i))){ location.replace("http://url-to-send-them/iphone.html");}--></script>

Читать больше
Размещено От Nektarios K.
Esahc ..
Esahc ..
Moderator

Nektarios

Whatever works for you is great, but as Claudio said, the entry page with detect resolution is really easy. Your code seems to be the solution for detecting specific hardware. What happens with non android/apple operating Systems?

Читать больше
Размещено От Esahc ..
Nektarios K.
Nektarios K.
User
Автор

Esahc,

Yes, you have right .... now I see carefully the entry page and the option for the viewport...

I will make it and test it.

Thanks 

Читать больше
Размещено От Nektarios K.