I have been asked to find if there is a quick way to force our mobile web application to be displayed on desktop web browsers. This is a stopgap-measure until we have the time and resources to finish work on responsively rendering correctly on larger-than-mobile devices.
The first thing I thought of for desktop-ifying our mobile webapp was to pull the mobile site into an iFrame and force a width and height (414x736 for now). I was hoping that by doing so, the CSS media selections would honor a 414px width, but that is not happening.
If I dump the width of the viewport to the console, it is in fact showing a width of 414px, but as you will see from the screenshots attached it's clear that the CSS media selections are not honoring a 414px width.
Here is what we want to see (this is just a screenshot of Chrome's debugger in iPhone 6 device mode):
Here is that same view rendered into an iFrame whose width and height have been set to 414 and 736 respectively. The frame size is perfect and functions just as I want, but the CSS media selections are borked:
I'd be willing to bet that this solution is specific to our webapp and might not work across the board, and this solution was not perfect.
The developer who originally implemented this webapp (in React/Redux) leaned on the CSS and graphics assets of a previous iteration of the webapp. I'm not sure why, but the webapp itself has a global 50% scale applied to the viewport like this:
<meta name="viewport" content="width=device-width, initial-scale=0.5">
By applying the following styling to my iFrame...
...
.force-mobile {
width: 750px;
max-width: 750px;
height: 1334px;
margin: 0 auto;
border-style: none;
border-color: inherit;
border-width: 0px;
-webkit-transform: scale(0.5);
-webkit-transform-origin: 0 0;
display: block;
}
...
<body>
<iframe id="forceMobile" class="force-mobile" src="http://myhost/mobile/"></iframe>
</body>
... I got the following result:
This is actually functional, although there are positioning issues, and issues with offsets into image maps (the missing hamburger menu icon is caused by this). It is going to require walking through the whole app and figuring out corrections to each individual piece, but this approach got me to a functional posture, so I'm happy with it for now.
I will keep this updated as I continue making progress.
Can you manipulate the user agent string to fool your app into sending the mobile version, as described in this article?
https://www.howtogeek.com/139136/how-to-access-mobile-websites-using-your-desktop-browser/
Related
I have this website that looks like how I want it to look like on desktop. When I view the website in the console (eg, check responsiveness) the website looks fine. But, when I upload the changes to AWS and view the website on my phone the vh and flexbox aren't working like I'm expecting them to.
View the website on your desktop and go to the console. From the console change toggle the device toolbar and change it the view to any of the phones. It works as intended. But then check the website out on your phone. What your viewing on the console is not what you'll see on your own phone.
I'd like the nav-bar, question, and chatbox, and input box all on one screen. Right now a use has to scroll through the chat in order to reach the input box. Once they reach the inputbox, they can't see the navbar or the question.
I'm trying to follow this guide
Chrome / Safari not filling 100% height of flex parent
But I'm still struggling. Not sure if anyone can go to my website and see the what's causing the problem.
There is too much code for me to put on here to hone in on the problem
I got rid of ALL height:100% css styles. I have very few height: ??px css styles. All 100:vh attributes are correctly implemented (I believe) as well as display:flex properties. If anyone can help, that'd be amazing.
Heres how mobile looks in the web console (which is what I want)
Heres how it looks (as an example) when you go on the website on your mobile phone. (Which is what I do NOT want)
EDIT can someone delete this post?
I fixed it by using display:flex and flex:1 in the correct divs. (I missed a few)
I would comment but I don't have comment privalages. I do want to help.
Have you added the following line to the top of your HTML?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Hope this helps. Best of luck with the project!
Try to change height: 100vh; to height: 100%;. I hope it'll resolve your issue. Thanks
body, html {
height: 100%;
margin: 0;
padding: 0;
}
I'm in the process of making my wordpress website responsive. I have two images on the page I'm working on which I want to set a max-width on of 100% to make them responsive (this is what I did on another website I made and it worked beautifully). However, I have noticed that as I shrink the page in Chrome dev tools the <html> and <body> elements are shrinking to really odd sizes, completely unrelated to the viewport size. Below are screenshots of the and elements, respectively, being hovered over in chrome dev tools:
And, of course since max-width with a percentage value, "Defines the maximum width of the containing block" and the containing blocks here (<html> and body) are resizing themselves in this unusual way, when I set the images to max-width: 100% they base that off the weird size of those elements.
The only CSS I have on these elements is:
* {
box-sizing: border-box;
}
body {
margin: 0;
}
So my question is, where on earth are the <html> and <body> elements getting their size from?
This behavior first began happening a few versions ago in Chrome; try testing your site/screens using FF (Moz/Firefox) responsive dev tools -- my guess is you'll see the results you expect. But this isn't necessarily an issue with Chrome; in my case it has something to do with environment. These days I work mostly with AEM and if I test in auth mode/disabled (or straight-up auth mode) this issue will occur. But if I view the same page live in production = no issue. So my guess (for us at least) is that it has something to do with the CMS or the server setup. I tend to use FF responsive dev tools these days -- give that a try and let us know how you make out.
html, body{
margin: 0; padding: 0; width: 100%;
height: 100%;
overflow-x: hidden !important;
}
Check to see that your zoom level is set to 100% (normal), in your browser.
I just manage to fix the same issue.
The problem is that the text forces the viewport width. You just have to ajust the font size to fix the issue.
I have taken over a website for a company and when it was handed to me, there was quite a bit of work to get it where it is now. Some of the stuff in the site, the owners want to keep, some they allow me to change. One thing I am trying to figure out right now is how to get the mobile version to line up with the desktop version. It seems like in portrait mode, the container width is too small; there is space to the right and some images overlap. I have tried the recommendations in other threads that seemed to be asking the same question, but nothing worked so I thought I would post my own question in case I am changing the wrong code.
I added:
<meta name="viewport" content="width=device-width, initial-scale=1">
and looked for pretty much any "width" in the css, but to no avail. What else am I missing?
Here is the site:
http://leisurelandrvcenter.com/
specifically the "Inventory" page:
http://leisurelandrvcenter.com/inventory/
-Disclaimer-
This seems to only happen on certain devices and only in portrait mode. Landscape mode works fine on the devices checked (android only).
Thanks in advance!
if you want to make it responsive you have to get rid of all the fixed width there are on the css, for example:
if you want to make the inventory page responsive you'll have to edit the following css:
#layout-content {
width: 1285px;
}
to this:
#layout-content {
max-width: 1285px;
width: auto;
}
Then in order to resize the images (for example the logo) you'll have to set the following css:
img { max-width:100%; width:auto; }
Instead of using the img tag you should use the css class or ID of the logo or any image you want to make responsive.
The images are too large for small screens. You could add mediaqueries to your css that set the width of images to 100% for smaller screens. (And anyway use css to set img sizes, instead of using img attributes in the html)
I'm trying to make my wordpress site always display with 100% width. My wordpress-css has no mobile specific css. When I visit the site on mobile, the site is not longer 100% width, despite the css saying that it should be. I'm currently testing stuff in the css and therefore not linking the site.
EDIT: I now tried removing all width-specifications in the entire css, the word "width" is not present anywhere in the css. The html still locks to exactly 320 pixels, same as the width specified by the iPhone4. This could be an issue with wordpress and not the css file.
The really weird thing is that if I scale up the window, and then scale it back down, it looks like it should look:
This is the css:
body, html {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
margin: 0;
padding: 0;
color: #333;
min-width: 100%;
margin: auto;
}
I have the viewport-thing at the top of my html:
<meta name="viewport" content="width=device-width">
However I have not been able to add the "initial-scale=1" into the wordpress html. From what I read I doubt that this is the problem though.
Any suggestions what could be wrong? As a sidenote: It does fail to display 100% width on an actual mobile device as well, it's not just the chrome device simulator failing.
A hint could be that it seems that even wordpress itself misjudges the width of the screen, as can be seen by the wordpress header not filling up 100%
By request of rsn, I will sum up our discussion as an answer. Creds to rsn and everyone else for finding the issue!
In this case, the width itself is set properly. The problem is that things move outside the 100% width and the site tries to scale everything down to fit the stuff moving outside of 100% width. This caused everything else to scale down, including the font size of the text which I thought was an entirely different problem. So, after specifying:
.img {
max-width: 100%;
}
The site worked fine. Except for one last detail, I also has a really long link that, despite having word-wrap: break-word, ended up being wider than the width. To solve this I added:
.long-link {
word-break: break-all;
}
And now nothing moves outside the 100% width, and everything works as it should.
I just finished a rough draft of a site I've been constructing. Unfortunately, I'm starting to notice how poor the design looks both on smaller resolution screens as well as when the user shrinks his/her current screen size.
The site I'm referring to can be seen here. Furthermore, the functionality I'm looking for can be seen on most any professional site, but I especially noticed it on IBM's site. When the screen is minimized the header content stays intact along with the rest of the site. I was looking for overlow: auto somewhere in their css, but I did not see it anywhere.
What can I change to fix this issue?
PS: I figured it would be easier to link to my site rather than posting code here. However, if you want some code just let me know and I'll embed something in here.
Take care,
Evan
#full-height-template-container {
width: 1300px; <----- in your app here now the width is in %
border: 1px solid #262626;
height: 515px;
margin: 0 auto 20px;
overflow: auto;
}
as you see I used the width in pixels, this way the site stays intact. if this is what you need, then it's ok.. if not, let me know and I'll see what else can be done.
IBM.com isnot doing anything noticeably different than you are.
If you want your design to be accessible and usable on different devices, you might consider responsive design. However, be sure it's worth your time. Your users might not be visiting with, say, an iPhone to make it worth your time.
Visually, what about having your menu span horizontally, instead of vertically? And also centering your image to its parent container?