I have made a webpage using the 960 grid system. And I have made it nice and responsive, following the excellent advice found in www.alistapart.com
So when developing the CSS for my new webpage I kept checking in Dreamweaver's Multiscreen viewport testing option and found that my pages were stacking up nicely on smaller screens. No miniature text, no need for pinch and zoom.
Then when testing page live, I learn that Ipad and Iphone does not resize windows and I can only get a miniaturized version of my full screen webpage.
I am hoping there is a simple CSS way to override this, so that my webpage stacks in a responsive manner also on apple devices.
You can maybe try a fluid grid option, such as sprysoft variable grid system which is based on 960.gs, though it will still have a definite grid layout (just % based instead of px based)
Related
Ok, now most mordern smartphone has 720p or 1080p resolution. That mean even screen size is small like 4 in, we still can see all text, gui (such as email textbox) of the whole website when first time opening it in Galaxy s3.
However, though we can see the very little email textbox in mobile browser, it is too small for us to enter data. So we need to magnify the page and that is very time consuming.
My question is, can we make the gui of GWT app automatically enlarges itself so that mobile users do not need to enlarge it?
Also the gwt could shpw the gui in Portrait direction.
you need to follow responsive web design principles to achieve your objective. Also have a look here bootstrap provides widgets that are flexible
So, how do they look? Tiny? Does chrome/the OS scale them up? I'd like to publish an app but I don't have a high dpi screen to test this things out and I'm really curious about it.
If they in fact look tiny, would a device-pixel-ratio media query that sets the html font-size fix it? All my units are set in rems, no images and only a few text.
Chrome apps generally look great on high-DPI screens -- just as Chrome itself does.
Even if your CSS specifies all dimensions in px, those are CSS pixels, and adapt to the display based on the device-pixel-ratio.
With rems, and no images, your app should look much better on a high-DPI display than on a standard one.
Low-DPI Images on a high-DPI screen can look pixellated -- not because they are tiny, but because they have been scaled up, and they are being presented beside crisply rendered text. For those cases, there are techniques that you can use to present high-resolution images to those displays, and standard images to others.
The other issue to be aware of is drawing with a <canvas> -- if you want a sharp image, you have to remember to scale the canvas area by device-pixel-ratio, and scale up all of your coordinates the same way as you draw.
I created my first iOS 5.0 iPhone app and the app's actual size is 480 width by 320 height, which is the default size of the iPhone.
My problem is I don't want the app to allow scrollbars or what I really mean is the ability to scroll past the 320 in height which is happening.
I looked at the Safari Web Content guide here
I still can't seem to figure this out can anyone suggest a fix.
Thanks.
you can do two things. in your css set your main wrapper to overflow:hidden;
also add this to your js onDeviceReady()
document.addEventListener('touchmove',function(event){event.preventDefault()});
that will not allow any scrolling and lock the app down.
NOW if you do want to allow scrolling I suggest looking into iScroll it's really easy to set up and get working, and will give a native look and feel to the scrolling.
I've built a photography site that displays photos side by side, user scrolls though photos using a horizontal scrollbar. (link removed no longer works)
I have used the jscrollpane plugin to customize the look of the scrollbar, but I have disabled it for the time being as I look for a fix. The container is called .scroll-pane.
Can anyone tell me how to get this to work on an iPhone?
Thank you and happy new year
Yeah, that won't work on iOS. You can use two fingers to scroll such an element, but most people are not aware of that.
You should consider a responsive design that adjusts how your site functions in mobile browsers.
Like in Firefox (Desktop version) I can take using Fireshot
and in Android mobile I can take using Dolphin Screen Cut
I already know that we take screendump using wake+home it doesn't take screencapture of whole webpage including the area under the scroll and it would be difficult to take multiple screenshots by pressing wake+home and scrolling in between but with this there will be small overlap between shots and thee combine screenshot will not be precise
Barry — Webpage screenshot does the trick. You can capture full length webpage screenshots and save them to Camera Roll or Copy to clipboard for pasting into any app that supports pasting in images.
After-all I found the solution
This app worked for me perfectly
Website Screenshot (iPhone app)
You wouldn't be able to do this in Mobile Safari.
If you're developing an application (and since this is stackoverflow I'll assume that's what you're talking about) and using a UIWebView you could do this - you would need to:
Calculate the total height of the webpage you want to capture
Use a UIWebView with the height obtained above to display your webpage at actual size
Render that UIWebView as an image in an off-screen buffer.
Webpage Capture for iPhone | iPad : https://itunes.apple.com/us/app/webpage-capture/id348797820?mt=8