I have an html page built for work perfectly at the screen resolution 1024px x 705px, on iPad (it's and html that get's launched in another app).
I need to set-up a CSS or JS rule, to view it on desktop client (like chrome), like is on iPad and 1024px x 705px resolution.
Using the "Inspector" the site looks great, but i need a kind-a-like preset to view it at this resolution without opening it.
Setting via CSS height and width of body didn't work. The page is bootstrap made.
Related
I'm developing a responsive website using react. For styling I use CSS stylesheets. The responsive part is achieved in CSS using #media queries.
The problem is that when I use chrome, the elements appear bigger and the layout is as I would access the website from a smaller screen (tablet). What I understand is that chrome 'thinks' that the view port is smaller and responds to the media queries with the according information.
The problem appeared in the middle of the development process, after some time of working correctly.
What did I do wrong and how do I fix this?
Note: When opening the website in Firefox, everything works as it should. Also, when I open dev tools in chrome (Inspect F12) and 'toggle device toolbar' to true (Ctrl + Shift + M) the dimensions are set correctly. The problem appears only using 'regular chrome'.
if the elements are appearing bigger and you want to design according to the width of the device, use vw (viewWidth) to set the sizing of the element. Use vh to set sizes according to the height of the device.
You can set font size, height/width of the div element, etc. Use this inside media queries so that the size of the font or width doesn't get too small when using mobile phones.
I used Vue to create my site and desktop version works perfect. When tested on Mobile IOS Safari and Chrome the page jumps up a bit when scrolled to bottom the first time. Android works fine. This problem doesn't happen the second time you scroll to bottom before you refresh the page. This problem also won't happen if you test it on desktop through dev tools.
The site's profile page does not have this problem.
I made a screen recording of the behavior: https://drive.google.com/file/d/1B93xtwF8f2VWAVegLbsZFULn3TymUCNZ/view?usp=sharing
I converted all the vh values to px to prevent browser reflow like so
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh',${vh}px);
it fixed my layout but didn't help with the jumping problem.
I also tried to set up a fixed height to the body by assigning CSS height values through Jquery .css method, when the fixed height is taller than the actual content, this problem does not happen.
I'm sorry that I don't have a snippet to reproduce this problem, I have no idea where the problem is at all.
My site url is https://www.jingqi.work
The expected result would be without the jumping up movement when scrolled to bottom, basically like how the profile page behaves.
So I have a div that contains varying content depending on buttons that are clicked. Since I want this div to be contained within a segment of the page, I'm using the CSS vertical height (vh) property to set the div height. And currently I'm working on a form that I'm adjusting the div's vh value for so that the whole form is visible via scrolling.
However, I've noticed that the height that I'm ending up with is different between a desktop browser and a mobile browser (specifically Chrome Desktop and Safari Mobile at the moment). For some reason there's a lot more space being created in the desktop version than in the mobile version, and I figure this could be attributed to the much larger screen space on the monitor versus the tablet, but I thought that using CSS vh would account for this?
If not, how should I be adjusting div height to match across desktop and mobile?
try using a max-height for that div, or perhaps manually setting the height in your css and giving it an overflow: scroll
for mobile you will need a media query, in chrome console, there is a little button at the top left that looks like a phone. Click it and select the device you want to apply css to. From there you can fiddle around until you get what you like. Then in your css you do a media query like this
#media all and (max-width: 320px) {
...your css
}
I've made a page that has two different scripts. The script that runs is determined by the screen size. Enquire.Js is used to achieve this.
When the page is viewed on screen bigger than 600px, I want the content to be displayed with jQuery Tabs.
I have made a test model here and it works fine: Live Page || JS Fiddle Version
Although it works, it only works one way. I.e. when the window is resized Enqiurie.js does its 'magic'. But if the window is re-sized again, the 'magic' is not reversed. (in contrast to a CSS media query where re-sizing the window again reverse the media query).
When the page is viewed on a screen smaller than 600px, I want it to be displayed with an iPhone style Nav.
I have made a test model here and it also works fine: Live Page || JS Fiddle Version
However, again it only works one way.
When I try to combine the two demos (i.e. so it switches between Tabs and iphone style Nav, it doesn't quite work.
See the test model here: Live Page || JS Fiddle Version
If the browser is more than 600px on load, you have to refresh the window for the tabs to appear.
If you reisze the window from less than 600px to more than 600px, some of the less-than-600px-code seems to persist.
I'm not sure what I am doing wrong. Thanks for any help!
I have a web app (i used JQM) currently customized to iphone.
all elements are fitted to the page height, but i'm getting a white space on the page bottom.
when viewing the page on pc browser everything is fine, so i guess the problem is related to the iphone screen resolution configuration on some CSS file.
Please view the web page on your iPhone to see the white space (scroll down):
http://aspspider.org/elimiz/check4/MC_v1.0.htm
Help me
I'm not seeing the issue on my iPhone but it sounds like a problem I had on a site.
I fixed it by setting a wrapper surrounding all the content as overflow: hidden. It might take some trial and error to find which element to put this on, and you might need to define height values on elements that dont have height explicitly stated.