2015-11-05 3 views
0

Я нашел проблему в цветной текстовой ссылке, на самом деле, я установил свой цвет ссылки для рабочего стола. Теперь, когда я увидел в Iphone, цвет меняется на синий. Я использую !important после цветового кода, но тот же результат на этот раз, пожалуйста, скажите мне, в чем проблема, и дайте мне лучшее решение.Как изменить цвет текстовой ссылки для IOS

+0

Вы пишете медиа-запрос для отзывчивого дизайна? – Gunaseelan

+0

извините, да, я использую медиа-запрос только для табуляции –

ответ

0
@media (min-device-width:320px) and (max-device-width:768px) 
{ 
    a {color:#ff0000;} 
} 

Если приведенный выше код не подходит для вас, подробный подробный код может исправить вашу проблему, указанную ниже.

/* ----------- iPhone 4 and 4S ----------- */ 

/* Portrait and Landscape */ 
@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px) 
    and (-webkit-min-device-pixel-ratio: 2) { 

} 

/* Portrait */ 
@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px) 
    and (-webkit-min-device-pixel-ratio: 2) 
    and (orientation: portrait) { 
} 

/* Landscape */ 
@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px) 
    and (-webkit-min-device-pixel-ratio: 2) 
    and (orientation: landscape) { 

} 

/* ----------- iPhone 5 and 5S ----------- */ 

/* Portrait and Landscape */ 
@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 568px) 
    and (-webkit-min-device-pixel-ratio: 2) { 

} 

/* Portrait */ 
@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 568px) 
    and (-webkit-min-device-pixel-ratio: 2) 
    and (orientation: portrait) { 
} 

/* Landscape */ 
@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 568px) 
    and (-webkit-min-device-pixel-ratio: 2) 
    and (orientation: landscape) { 

} 

/* ----------- iPhone 6 ----------- */ 

/* Portrait and Landscape */ 
@media only screen 
    and (min-device-width: 375px) 
    and (max-device-width: 667px) 
    and (-webkit-min-device-pixel-ratio: 2) { 

} 

/* Portrait */ 
@media only screen 
    and (min-device-width: 375px) 
    and (max-device-width: 667px) 
    and (-webkit-min-device-pixel-ratio: 2) 
    and (orientation: portrait) { 
     a { 
     color: #ff0000; 
     } 

} 

/* Landscape */ 
@media only screen 
    and (min-device-width: 375px) 
    and (max-device-width: 667px) 
    and (-webkit-min-device-pixel-ratio: 2) 
    and (orientation: landscape) { 
     a { 
     color: #ff0000; 
     } 

} 

/* ----------- iPhone 6+ ----------- */ 

/* Portrait and Landscape */ 
@media only screen 
    and (min-device-width: 414px) 
    and (max-device-width: 736px) 
    and (-webkit-min-device-pixel-ratio: 3) { 
    a { 
     color: #ff0000; 
     } 

} 

/* Portrait */ 
@media only screen 
    and (min-device-width: 414px) 
    and (max-device-width: 736px) 
    and (-webkit-min-device-pixel-ratio: 3) 
    and (orientation: portrait) { 
     a { 
     color: #ff0000; 
     } 

} 

/* Landscape */ 
@media only screen 
    and (min-device-width: 414px) 
    and (max-device-width: 736px) 
    and (-webkit-min-device-pixel-ratio: 3) 
    and (orientation: landscape) { 
     a { 
     color: #ff0000; 
     } 
} 
+0

sir, вы уверены в этом коде –

+0

Я использую этот тип кода уже в своем css, но я не исправляю эту проблему. –

+0

Проверьте и дайте мне знать – Gunaseelan

0

Вы должны иметь что-то вроде

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) { 
    a { 
     color: red; 
    } 
} 
0

может у добавить "-webkit-внешний вид: нет;" в теге привязки, и установить цвет шрифта и удалить важный из кода

например:

.link { 
    color: blue; 
    -webkit-appearance: none; 
} 
+0

Я уже написал этот тег в моем css –

+1

Могу ли вы поделиться кодом с помощью Fiddle –

0

Ok я нашел мое решение этой проблемы, когда я использую этот тип мета-тег мой текст ссылки цвет же как я описал в css.

Я использую этот метатег в заголовке.

<meta name="format-detection" content="telephone=no"> 
+0

Данный метатег используется только для включения/выключения телефонных номеров на веб-странице в сафари на iOS. Для справки проверьте этот [url] (https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html) – Gunaseelan

Смежные вопросы