Wikipedia Viewer 🌞 Question : How to set up the viewport as computer on mobile?

Wikipedia Viewer :sun_with_face: Question : How to set up the viewport as computer on mobile?
0

#1

Hello,
Finalizing my wikipedia viewer, I was looking for a solution to force the viewport on mobile in order to be automaticly as on a computer.

I found a comment advising to use meta in the head, but it seems more complicated than that.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Do you have a special trick about that point ?

Best
J.


? Feedback :alien: twitch is alive
#2

Im not entirely sure what you are asking…is it to fix how it looks in mobile view? I tried playing around with it… I don’t know too much about Bootstrap 4 yet, but I am feeling like incorporating the row and column classses will help. Just not sure how since I havnt really checked out this version of Bootstrap yet.

I really…really love this wiki search though!!! I especially like that even though its in French and there arent any instructions, I was able to right away figure out what to do. Really fun looking Wiki viewer :slight_smile:


#3

Thanks for your comment and kinds words,

When I use my mobile phone explorer (Chrome) I am able to force the view to be “as a computer view” so I would like to force the view on mobile “as a computer” without having to do this manipulation.

I feel it changing the viewport scale, any idea ?

How do you adapt the heigth of the column to be 1/4 of the heigth of the page using only boostrap ?


#4

Ahhh okay, I see what you mean… well hrm… you cant force that view on someones phone…what we have to work with is to make the page responsive so that it will display with a mobile view.

I just tried it, and indeed…while the layout looks awesome on desktop, on mobile its very squished…and when I try to type in the search box, its hard to find the curser in portrait view but in landscape view, my keyboard takes up the whole screen so I cannot see the website at all.

This is a situation where, I would consider instead of trying to keep the exact same layout from desktop to mobile (which hardly happens actually in responsive design, as the idea is for the content to shift and flow into place on smaller screens) to have the result boxes flow one under the other, with the results appearing as full width rows in one column. Does that make sense?


#5

Ho yes,
I have to polish this to bring more responsiveness to the experience,
thanks for your comment


#6

No prob!! Please update here when you work out how to display it for mobile view… very interested!


#7

I just update the pen with some responsive lines using grid-template-columns to achieve a simple responsive effect.


#8

Ohhhh that looks great! Works wonderfully!!!

The only thing really is Id consider changing the colour of the yellow block where the random link is…either to another colour or have the text in it be something other than white so that you’re able to read it.

Such a unique design for the Wiki viewer… thanks so much for the update :smiley:


#9

Thanks again for your challenging comments