Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: Media Query advice for ipad 1

  1. #1
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,067
    Thanks
    156
    Thanked 3 Times in 3 Posts

    Default Media Query advice for ipad 1

    Here is my index page in question http://www.theremotedoctor.co.uk/index.html

    On my ipad 3 the view is the same as the PC which is fine.

    I also have an ipad 1 but the view is the same as on the iphone & think it should be the same as ipad 3 & PC,maybe the media querie would fix it ?

    So i am looking to get the same view on the device

    In the basic css file line 308 the original code was,
    Code:
    @media only screen and (min-width: 481px) {
    I have tried the following to try & get the same view but no such luck.
    Code:
    @media only screen and (min-width: 481px) {
    Code:
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : landscape)
    Code:
    @media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1)
    This ipad 1 does not rotate the screen so Landscape is only applicable.

    Can you advise any help please.

  2. #2
    Join Date
    Jan 2009
    Location
    NH
    Posts
    653
    Thanks
    96
    Thanked 26 Times in 26 Posts

  3. #3
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,067
    Thanks
    156
    Thanked 3 Times in 3 Posts

    Default

    Hi,
    I tried the following
    Code:
    /* iPad in landscape */
    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : landscape) {
    But it altered the display on my pc even though the resolution of ic is 1600 x 1200 ?

    I thought just by changing the 920 to 768 would do it but not ?
    Code:
    @media only screen and (min-width: 768px) {

  4. #4
    Join Date
    Jan 2009
    Location
    NH
    Posts
    653
    Thanks
    96
    Thanked 26 Times in 26 Posts

    Default

    why not just edit your css and add all that at the bottom where your media queries are? I have that on lots of pages that I've made and never had an issue

  5. #5
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,067
    Thanks
    156
    Thanked 3 Times in 3 Posts

    Default

    To be honest I'm not to sure about that.
    I thought I could just add the media query and add the code to it.
    That didn't work at all.
    I can make my devices look like the iPad 1 but can't make the iPad 1 look like the other devices.

  6. #6
    Join Date
    Jan 2009
    Location
    NH
    Posts
    653
    Thanks
    96
    Thanked 26 Times in 26 Posts

    Default

    you could also test it by editing your css to add all of that code and name is styles2.css
    then edit your index.html and change your original css sheet to styles2.css and save it as index2.html
    then upload it and open your site and open your site but put http://www.theremotedoctor.co.uk/index2.html in the address bar

    this is what your view is on iPhone 3, your social media bar on the left and bottom overlap your page content
    Click image for larger version. 

Name:	iphone3.jpg 
Views:	54 
Size:	13.0 KB 
ID:	5864

    this is on iPhone 6
    Click image for larger version. 

Name:	iphone6.jpg 
Views:	44 
Size:	12.6 KB 
ID:	5865

    try free mobile site checkes like
    http://youresponsive.com/

    http://www.mobilephoneemulator.com/
    Last edited by mlegg; 03-31-2016 at 06:37 PM. Reason: add imgs

  7. #7
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,067
    Thanks
    156
    Thanked 3 Times in 3 Posts

    Default

    The iPhone isn't a problem.
    It's the iPad 1 or original some people call it.

    My iPad 3 show in the index page the tabs which once clicked on has a drop down box.
    My iPhone shows menu, you click menu then you have one long list.
    My iPad 1 has the same view as the iPhone BUT I am trying to get the view the same as the iPad 3

  8. #8
    Join Date
    Jan 2009
    Location
    NH
    Posts
    653
    Thanks
    96
    Thanked 26 Times in 26 Posts

    Default

    Did you try adding those media queries to your css?

  9. #9
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,067
    Thanks
    156
    Thanked 3 Times in 3 Posts

    Default

    Yes.
    But it then altered the PC view.

  10. #10
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,067
    Thanks
    156
    Thanked 3 Times in 3 Posts

    Default

    Click image for larger version. 

Name:	image.jpg 
Views:	49 
Size:	20.1 KB 
ID:	5866
    Click image for larger version. 

Name:	image.jpg 
Views:	49 
Size:	20.6 KB 
ID:	5867
    These are the views from both iPads.
    Im trying to get the ipad1 to show the image like the example of PayPal in it.

Similar Threads

  1. Media Query Help!
    By LeaChristine in forum CSS
    Replies: 1
    Last Post: 11-22-2014, 11:26 AM
  2. css media query issues
    By ianhaney in forum CSS
    Replies: 0
    Last Post: 11-05-2014, 07:28 PM
  3. Using #hintbox on an iPad
    By ttgivencej in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 02-13-2014, 04:13 AM
  4. Replies: 1
    Last Post: 03-01-2013, 01:49 PM
  5. Resolved ipad problem
    By traq in forum CSS
    Replies: 12
    Last Post: 05-22-2011, 02:48 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •