Have anyone tried forcing desktop view to display on mobile devices (when one clicks the view desktop version on their browsers)?
I was thinking if it is possible to maintain normal mobile view for mobile and then force desktop view when the view desktop version is selected on mobile devices...
The 'View Desktop Version' button present in google chrome browsers works this way:
It changes the User-Agent header in the request to match those
sent by the desktop browsers.
It ignores the original viewport meta tag and applies the default
"min-width: 980px;" media query to the css thus putting the responsive
pages into their desktop layout.
So if your website is responsive then there is no need to do any extra work. It will automatically switch to the desktop layout when forced through 'View Desktop Version'.
Related
I use media queries in my code and the website displays as it should on the mobile.
But when I go on ''desktop site'' in Chrome the website displays as it should display for devices with max width of 1000px, not as it should for a desktop. Why is that?
I would like that the user actually sees the full desktop site when clickig on ''desktop site'' mode.
//Initial situation - What I have and what I want
I am using WordPress version 5.1.1 with the Elementor Page Builder Plugin version 2.5.8 and I want to make a responsive website looking good on both desktop and mobile, tablet as well.
So I have a section with two columns within the row where below is the same system for 2 more times on desktop view. When it comes to mobile, I want a different adjustment.
so the trick I use is, I duplicate the widget and align the elements within the second section and set the first one to hide on mobile and the second to hide on desktop and tablet. So far so good, it seems all working.
//The problem - What doesn't work and needs to be fixed
As I told above, the system I use seems to be working, on mobile it only shows the second section, on desktop only the first. Tested on 100% size in the windows display settings and zoom in the browser and separate browsers.
BUT When it comes to 125% in the windows display settings and I split the page via the windows function to half of the screen, it shows both sections which either doesn't look good and really isn't what I want and need. It only happens with Google Chrome browser, all others "decide" which device it's using at the moment, only chrome shows on 125% AND half screen at the same time both sections.
What can I do / How can I fix this issue?
Edge eg. sets on the half screen to tablet while Chrome is still in Desktop.
MAybe it has something to do with Madia breakpoints? Can I change them in WP-Settings?
Thanks in advance and best regards!
Edit: Pictures to show what it kinda looks like:
This is the standard desktop view of this section
This is the standard tablet view of the second section
This is how it looks in Google Chrome 125% Windows 100% Browser Zoom Half Screen
Don't have any manual media queries, they're all standard. Works with all on 100% Windows resolution, only on 125% Google Chrome it's weird.
I'm using wordpress and I have my own built table on some page.
This table is showing some info for mobile users and more info for desktop users (because of space).
I'm using css rule
media only screen and (max-device-width:
to show the correct info for mobile users (i'm using display: none to hide some parts).
Everything works great but, when I click on my mobile browser to view as desktop, it does show as desktop the whole website expect my table which remains the same as mobile (with hidden parts).
What can i do to recognize this situation?
Thanks
I am coding email template(Email marketing).
User can upload html template and select to send mail
I want resize html reponsive on my website like gmail?
How to Resize html element:img,text,table?
view on Gmail with Mobile
View On my website with Mobile
I was having the same issue and in order to fix this I found two approaches:
1) Activating the Request desktop version, under the mobile browser settings:
How to request desktop version of a Web site in Chrome for Android
How to Disable the Mobile Version of a Website on Your iPhone
2) But I just wanted to do this automatically, when my website load in Mobile browser without making the extra steps to set the Request desktop version, and this link provided me the instructions to fix the issue:
Responsive design with “switch to desktop site” option
I'm trying to create a mobile friendly website but I can't seem to get my base template right.
http://jsfiddle.net/dvQqb/
The template needs to be fullscreen, but not all the text needs to be small like my HTC Sensation (Cellphone) displays.
So it needs to have a width of 100% but it does not have to be seen like it is zoomed out.
A mobile browser will often assume, by default, that it's loading a page that was designed for a large screen, and therefore will make an assumption of size and then just zoom the entire document down.
To tell the mobile browser you want to target it's own screen size, you need to add the viewport meta tag information:
https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
A great place to start is html5 Mobile Boilerplate.
Why it is awesome
Cross-platform compatible (Android, iOS, Blackberry, Symbian)
CSS class to target IE Mobile 7
Home screen icon (Android, iOS, Symbian)
Cross browser viewport optimization for Opera Mobile, Android, iOS, IE, Nokia, Blackberry.
Optimized viewport scaling (Opera Mobile, Android, iOS, Mobile IE, Blackberry)
Option to enable iOS start-screen in full screen mode
Better font rendering on IE Mobile
Adaptable markup and CSS skeleton
CSS stylesheet for low-end devices
Mobile sitemap
Mobile MIME type support
Build tool for mobile
Fix iPhone reflow scale up bug