I'm trying to resize my wrapper, so when viewed on iPhone, iPad or computer 100% of my site is in view. I have placed pictures in my scroller using the <ul> and <il> methods.
At the moment everything is in view on my computer, but on iPhone the pictures are getting cut off. It's letting me scroll horizontally and vertically my pictures, but need to resize the wrapper so my pictures are smaller.
Any help would be amazing. Cheers in advance
You didn't provide any codes, so these maybe help you:
Set proper width/height to your wrapper when browser resizes and window.onload. Because we don't know device is in landscape or portrait mode until window.onload. Here better explained how to get resized browser width/height.
Check your images width/height. Maybe images' dimensions wider than wrapper. You can set width/height to image in percent.
And don't forget refresh iScroll when browser resizes. You can do it like that:
setTimeout(function(){myScroller.refresh()}, 400); // browser need time to rotate
Related
I'm attempting to make a page that will be compatible both with a PC browser and a browser on a phone.
Essentially, I want to size my elements as large as I can on the smaller screens (ideally, even a little bit larger), while confining everything to a narrow vertical band in the center on a PC browser window.
You can see the look I'm trying for here:
http://www.hoggy.com
I've attempted to read the browser's width to tweak the data on the fly, but I find I cannot get a reliable width on all platforms.
So I've attempted to center things, and make the image and table sizes be a percentage of the page size... but on a phone it's too small (thus I would like it to be actually a little wider than the phone screen) whereas on the PC, I want my width to be, effectively, min(100%,500px).
Is there any way to do that?
Simplest answer:
html
{
max-width: 1024px
}
I am currently working on a website which uses a banner image on a profile. However if a user uploads an image the position of the banner may not be correct and they may want to change it to display the correct position of the image they want. So I have been following this guide: http://w3lessons.info/2014/08/31/facebook-style-cover-image-reposition-using-jquery-php/
I have used this guide and it works without error when I am on desktop screen sizes like 20" and above... However when ever I try to change the image position on mobile it doesn't scale correctly and the image thumb nail is not cropped correctly. But it works when the website is on a desktop because the image banner is full size... There is a demo on the website with the guide if you want to check it out and see what I am on about. I tried to see changing the crop width and height to match the mobile size but that means when it resizes back to a desktop the image is only scaled for a mobile then.
The problem is to do with:
$default_cover_width = 918;
$default_cover_height = 276;
As the screen size changes the default cover size changes as well...
I was wondering if anyone could point me in the right direction so that I could get this working on a mobile device as well.
Thanks.
I am developing for tablet and the objective is to have the expanded portion of a banner, expand to fullscreen on tablet. Since full-screen is not supported on mobile browsers I was hoping to find an alternative solution. Currently the div has a fixed width and height on it for both, portrait and landscape orientation.
Objective: Tablet: In portrait + landscape view to scale div to fill height preferably with CSS only or basic JS.
Not sure how to go about this. Thanks for your help!
I'm not completely sure what your saying but have a look into media queries. They might be what you are looking for, it is pure css. http://css-tricks.com/css-media-queries/
I'm using bxslider (can use any free slider if needed) and I want to make it not exceed the viewport height. For example, the slider works fine on iPhone/Nexus 5 (portrait), but when in landscape, the photos have bigger height and you have to scroll to see them. This is because I have content above the slider, if I were to delete it, it would be 100% height and would work fine.
The site you can see it on - http://laurakok.openyourpage.com/ (note - you have to be on touch device, or use emulation (chrome for example)).
Try using Slick.
http://kenwheeler.github.io/slick
You can set settings at different breakpoints.
I'm using responsive and adaptive media queries for my website to accommodate smartphones...Now the problem is that my max-width mobile query ends at 480px, which is most phones rotated display width (when the phone is on its side...). Now some phones, like the HTC desire have a max screen width of 533px, now when the user first loads the page on vertical position (320px screen width) and he/she rotates rotates the screen to 533px width, it goes past my design specifications and it looks kinda crappy...(since the layout was meant for 480px max...)
Now the only way to solve that is to refresh the page once the viewport dimensions change. How do I force a refresh?
Thank you
if device rotate window resized.
window.onresize = function(event)
{
document.location.reload(true);
}